柚子快報邀請碼778899分享：css 學(xué)習(xí) 前端 Title
給三個一級標(biāo)題設(shè)置不同顏色
如果用標(biāo)簽選擇器，顯然是不行的
Title
標(biāo)題1
標(biāo)題2
標(biāo)題3
這時候，就需要類選擇器出場了：
Title
標(biāo)題1
標(biāo)題2
標(biāo)題3
用
設(shè)置類名稱，在style中設(shè)置樣式時，用”.類名"的方式單獨(dú)設(shè)置某一個class屬性的顏色，即類選擇器選擇所有class屬性一致的標(biāo)簽設(shè)置樣式，且可跨標(biāo)簽使用。
解釋跨標(biāo)簽使用：
在上述類選擇器代碼中：
標(biāo)題1
標(biāo)題2
標(biāo)題3
h1標(biāo)簽和p標(biāo)簽共用一個class屬性是可以的。
用法簡要?dú)w納：
標(biāo)題1
標(biāo)題2
標(biāo)題3
優(yōu)勢：
可以多個標(biāo)簽歸類（設(shè)置同一個class）
2.1.3ID選擇器
顧名思義：
Title
標(biāo)題1
標(biāo)題2
標(biāo)題3
用法簡要?dú)w納：
標(biāo)題1
標(biāo)題2
標(biāo)題3
注意：
id必須保證全局唯一！不可復(fù)用！
不遵循就近原則，優(yōu)先級為：id選擇器>class選擇器>標(biāo)簽選擇器
2.2層次選擇器
2.2.1后代選擇器
在某個元素的后面
例：
Title
p1
p2
p3
p4
p5
p6
其中，body p{}指設(shè)置"body"后的所有p標(biāo)簽。
2.2.2子選擇器
只設(shè)置一代
只有"body"后的第一代p標(biāo)簽才被有效設(shè)置。
2.2.3相鄰兄弟選擇器
顧名思義，同輩
Title
p0
p1
p2
p3
p4
p5
p6
p7
p8
其中"p2"是"p1"的相鄰兄弟（向下順延），“p8"是"p7"的相鄰兄弟（向下順延），所以"p2”、"p8"被有效設(shè)置，"p0"因其為"p1"的向上相鄰而非向下，故不被有效設(shè)置。
2.2.4通用選擇器
即，相對于相鄰兄弟選擇器，多了其本身。
2.3偽類選擇器
偽類選擇器（簡稱：偽類）通過冒號來定義，它定義了元素的狀態(tài)，如點擊按下，點擊完成等，通過偽類可以為元素的狀態(tài)修改樣式。
偽類選擇器主要可以分為：動態(tài)偽類選擇器、UI元素狀態(tài)偽類選擇器、結(jié)構(gòu)偽類選擇器、否定偽類選擇器。
2.3.1動態(tài)偽類選擇器
| 語法 | 解釋 |
| — | — |
| E:link | 選擇匹配的E元素，而且匹配元素被定義了超鏈接并未被訪問過。常用于鏈接描點上 |
| E:visited | 選擇匹配的E元素，而且匹配元素被定義了超鏈接并已被訪問過。常用于鏈接描點上 |
| E:active | 選擇匹配的E元素，且匹配元素被激活。常用于鏈接描點和按鈕上 |
| E:hover | 選擇匹配的E元素，且用戶鼠標(biāo)停留在元素E上。IE6及以下瀏覽器僅支持a:hover |
| E:focus | 選擇匹配的E元素，而且匹配元素獲取焦點 |
a標(biāo)簽有4種偽類（即對應(yīng)四種狀態(tài)），如下：
:link “鏈接”：超鏈接點擊之前 :visited “訪問過的”：鏈接被訪問過之后 :hover “懸?！保菏髽?biāo)放到標(biāo)簽上的時候 :active “激活”： 鼠標(biāo)點擊標(biāo)簽，但是不松手時。
例：
/讓超鏈接點擊之前是紅色/
a:link {color: red;}
/讓超鏈接點擊之后是橙色/
a:visited {color: orange;}
/鼠標(biāo)懸停，放到標(biāo)簽上的時候是綠色/
a:hover {color: green;}
/鼠標(biāo)點擊鏈接，但是不松手的時候/
a:active {color: black;}
在 CSS 定義中，a:hover 必須被置于 a:link 和 a:visited 之后，才是有效的，a:active 必須被置于 a:hover 之后，才是有效的。所以，a標(biāo)簽的這四種偽類選擇器的順序為：a:link ，a:visited，a:hover ，a:active
2.3.2UI元素狀態(tài)偽類選擇器
| 語法 | 解釋 |
| — | — |
| E:checked | 匹配選中的復(fù)選按鈕或者單選按鈕表單元素 |
| E:enabled | 匹配所有啟用的表單元素 |
| E:disabled | 匹配所有禁用的表單元素 |
UI元素狀態(tài)偽類選擇器主要是針對于HTML中的Form元素進(jìn)行操作，最常見的比如我們"type="text"有enable和disabled兩種狀態(tài)，前者為可寫狀態(tài)后者為不可狀態(tài)；另外"type="radio"和"type=“checkbox”"有"checked"和"unchecked"兩種狀態(tài)。來看兩個實例，比如說你想將"disabled"的文本框與別的文本框區(qū)別出來，你就可以這樣應(yīng)用：
input[type=“text”]:disabled {border:1px solid #999;background-color: #fefefe;}
注意：IE6-8不支持":checked",“:enabled”,":disabled"這三種選擇器。
2.3.3結(jié)構(gòu)偽類選擇器
| 語法 | 解釋 |
| — | — |
| E:fisrt-child | 作為父元素的第一個子元素的元素E。與E:nth-child(1)等同 |
| E:last-child | 作為父元素的最后一個子元素的元素E。與E:nth-last-child(1)等同 |
| E:root | 選擇匹配元素E所在文檔的根元素。在HTML文檔中，根元素始終是html，此時該選擇器與html類型選擇器匹配的內(nèi)容相同 |
| E F:nth-child(n) | 選擇父元素E的第n個子元素F。其中n可以是整數(shù)（1，2，3）、關(guān)鍵字（even，odd）、可以是公式（2n+1）,而且n值起始值為1，而不是0 |
| E F:nth-last-child(n) | 選擇父元素E的倒數(shù)第n個子元素F。此選擇器與E:nth-child(n)選擇器計算順序剛好相反，但使用方法都是一樣的，其中：nth-last-child(1)始終匹配最后一個元素，與last-child等同 |
| E:nth-of-type(n) | 選擇父元素內(nèi)具有指定類型的第n個E元素 |
| E:nth-last-of-type(n) | 選擇父元素內(nèi)具有指定類型的倒數(shù)第n個E元素 |
| E:first-of-type | 選擇父元素內(nèi)具有指定類型的第一個E元素，與E:nth-of-type(1)等同 |
| E:last-of-tye | 選擇父元素內(nèi)具有指定類型的最后一個E元素，與E:nth-last-of-type(1)等同 |
| E:only-child | 選擇父元素只包含一個子元素，且該子元素匹配E元素 |
| E:only-of-type | 選擇父元素只包含一個同類型子元素，且該子元素匹配E元素 |
| E:empty | 選擇沒有子元素的元素，而且該元素也不包含任何文本節(jié)點 |
Title
p1
p2
p3
li1li2li3
規(guī)定屬于其父元素的第一個子元素的每個 p 的背景色：
/選中p1：定位到父元素，選擇當(dāng)前的第一個元素/
p:nth-child(1){
background: blueviolet;
}
解釋：
第一步：定位p的父元素（p的第一個作用）
第二步：定位父元素下的第一個元素（數(shù)字的作用）
第三步：判斷這第一個元素是否為p，若為p則改變樣式，否則無效
選擇父元素里第二個類型為p的元素，設(shè)置為黃色背景：
p:nth-last-of-type(2) {
background: yellow;
}
結(jié)構(gòu)偽類選擇器，可以根據(jù)元素在文檔中所處的位置，來動態(tài)選擇元素，從而減少HTML文檔對ID或類的依賴，有助于保持代碼干凈整潔。
結(jié)構(gòu)偽類選擇器很容易遭到誤解，需要特別強(qiáng)調(diào)。如：
input:not([type="submit"]) {border: 1px solid red;}
它表示的是：選擇父元素下的第一個子元素 p，而不是選擇 p 元素的第一個子元素。
2.3.4否定偽類選擇器
| 語法 | 解釋 |
| — | — |
| E:not(F) | 匹配所有除元素F外的E元素 |
例：對form中所有input加邊框，但又不想submit也起變化，就可以這樣寫：
input:not([type=“submit”]) {border: 1px solid red;}
2.4屬性選擇器（常用）
屬性選擇器可以根據(jù)元素的屬性及屬性值來選擇元素。
可以理解為id + class
一些隨心的例子：
Title
柚子快報邀請碼778899分享：css 學(xué)習(xí) 前端 Title
文章來源
本文內(nèi)容根據(jù)網(wǎng)絡(luò)資料整理，出于傳遞更多信息之目的，不代表金鑰匙跨境贊同其觀點和立場。
轉(zhuǎn)載請注明，如有侵權(quán)，聯(lián)系刪除。
OnBuy海外商城
