CSS選擇器規(guī)定了CSS規(guī)則會(huì)作用到哪些元素上揍堕。
基本選擇器
- 元素選擇器：根據(jù)元素名稱匹配元素
元素 {樣式聲明}
- 類選擇器：根據(jù)元素class屬性中的內(nèi)容匹配元素
.類名 {樣式聲明}
- ID選擇器：根據(jù)元素的ID屬性匹配元素
#ID {樣式聲明}
- 通配選擇器：匹配任意類型的元素
* {樣式聲明}
- 屬性選擇器：根據(jù)屬性名或?qū)傩灾灯ヅ湓?
-
[attr]帶有以 attr 命名的屬性的元素 -
[attr=value]帶有以 attr 命名的仑扑，且值為"value"的屬性的元素 -
[attr~=value]帶有以 attr 命名的屬性的元素，并且該屬性是一個(gè)以空格作為分隔的值列表恒削，其中至少一個(gè)值為"value" -
[attr|=value]帶有以 attr 命名的屬性的元素特纤，屬性值為“value”或是以“value-”為前綴 -
[attr^=value]帶有以 attr 命名的俐载，且值是以"value"開頭的屬性的元素 -
[attr$=value]帶有以 attr 命名的吊骤，且值是以"value"結(jié)尾的屬性的元素 -
[attr*=value]帶有以 attr 命名的氯析，且值包含有"value"的屬性的元素 -
[attr operator value i]在帶有屬性值的屬性選型選擇器表達(dá)式的右括號(hào)（]括號(hào)）前添加用空格間隔開的字母i(I)可以忽略屬性值的大小寫
-
img[src$=".svg" i] { /**忽略大小寫**/
color: pink;
}
組合選擇器
- 多元素選擇器：當(dāng)使用 , 連接兩個(gè)元素時(shí)使得該選擇器可以同時(shí)匹配第一個(gè)元素和第二個(gè)元素
前方元素 , 目標(biāo)元素 {樣式聲明}
- 相鄰兄弟選擇器：匹配緊跟其前方元素的同胞元素
前方元素 + 目標(biāo)元素 {樣式聲明}
- 通用兄弟選擇器：當(dāng)使用 ~ 連接兩個(gè)元素時(shí),它會(huì)匹配第二個(gè)元素,條件是它必須跟(不一定是緊跟)在第一個(gè)元素之后,且他們都有一個(gè)共同的父元素
元素 ~ 元素 {樣式聲明}
- 子選擇器：當(dāng)使用 > 選擇符分隔兩個(gè)元素時(shí),它只會(huì)匹配那些作為第一個(gè)元素的直接后代(子元素)的第二元素.
元素1 > 元素2 {樣式聲明}
- 后代選擇器：當(dāng)使用空格連接兩個(gè)元素時(shí)使得該選擇器可以只匹配那些由第一個(gè)元素作為祖先元素的所有第二個(gè)元素(后代元素)
元素1 元素2 {樣式聲明}
偽類選擇器
:link：匹配未被訪問的鏈接:visited：匹配已被訪問的鏈接:focus：匹配點(diǎn)擊亏较、觸摸、tab鍵選擇的元素:hover：匹配鼠標(biāo)懸停其上的元素:active：匹配被用戶激活的元素(鼠標(biāo)在其上已經(jīng)按下掩缓、還沒有釋放的元素)
為了正確地渲染鏈接元素的樣式需遵循LVFHA的先后順序雪情，即：:link — :visited — :focus — :hover — :active
:focus-within：匹配獲得焦點(diǎn)，或該元素的后代獲得焦點(diǎn)的元素:checked：匹配處于選中狀態(tài)的radio, checkbox或select中的option元素:disabled：匹配被禁用的元素:enabled：匹配被啟用的元素:root：匹配文檔樹的根元素你辣。對(duì)于HTML來說巡通，:root表示html元素，除了優(yōu)先級(jí)更高之外舍哄，與html選擇器相同:not()：匹配不符合參數(shù)選擇器X描述的元素
- X不能包含另外一個(gè)否定選擇器
- X會(huì)參與權(quán)重計(jì)算
-
:nth-child(an+b)：匹配文檔樹中在其之前具有 an+b-1 個(gè)兄弟節(jié)點(diǎn)的元素宴凉，其中 n >=0
- :nth-child(0n+3) / :nth-child(3) 匹配第三個(gè)元素
- 1n+0 或簡單的 n 匹配每個(gè)元素
- :nth-child(2n+1) / :nth-child(odd) 匹配奇數(shù)行
- :nth-child(2n) / :nth-child(even) 匹配偶數(shù)行
- :nth-child(-n+3) 匹配前三個(gè)子元素
-
:nth-of-type(an+b)：匹配文檔樹中在其之前具有 an+b-1 個(gè)相同標(biāo)簽的元素，其中 n >=0
- E:nth-of-type(2) 匹配第二個(gè)標(biāo)簽為E的元素
- .class:nth-of-type(2) 匹配相同標(biāo)簽的第二個(gè)且該(第二個(gè))標(biāo)簽的類名匹配.class
<style>
.item:nth-of-type(3){
color:red;
}
</style>
<div>
<h1>標(biāo)題</h1>
<p class="item">這是鍛若</p>
<p>這是鍛若</p>
<span>這是span</span>
<span class="item">這是span</span>
<span class="item">這是span</span> <!-- 紅色 -->
<p class="item">這是鍛若</p> <!-- 紅色 -->
<p class="item">這是鍛若</p>
<p class="item">這是鍛若</p>
<h1 class="item">標(biāo)題</h1>
<h1>標(biāo)題</h1> <!-- 不是紅色 -->
</div>
偽元素選擇器
::before:before::after:after::first-letter:first-letter：匹配某塊對(duì)象第一行的第一個(gè)字母表悬，并且文字所處的行之前沒有其他內(nèi)容（如圖片和內(nèi)聯(lián)的表格）::first-line:first-line：匹配某塊對(duì)象第一行::placeholder：匹配一個(gè)表單元素的占位文本::selection：匹配文檔中被用戶高亮的部分(比如使用鼠標(biāo)或其他選擇設(shè)備選中的部分)
注意 塊對(duì)象指display: block, inline-block...
