CSS選擇器筆記

03-06

常用CSS選擇器：

一、簡單選擇器

*，通用元素選擇器，匹配任何元素

E，標籤選擇器，匹配所有使用E標籤的元素

.class，class選擇器，匹配特定class屬性的元素

/#ID，id選擇器，匹配特定id屬性的元素

二、屬性選擇器

[atrr] ，選擇包含 attr 屬性的所有元素，不論 attr 的值為何

[attr=val] ，僅選擇 attr 屬性被賦值為 val 的所有元素

三、組合選擇器

A, B ，多元素選擇器：選中匹配 A 或B 元素

A B ，後代選擇器：選中匹配 A 元素的後代B 元素(A B之間空格分開)

A > B，子元素選擇器：選中匹配 A父元素內的直接B子元素

A + B，直接相鄰選擇器：選中匹配 B 元素之後的相鄰的同級的A元素

A ~ B，普通相鄰選擇器：選中B元素之後的同級 A 元素（無論直接相鄰與否）

.a.b,匹配class=a b"元素

A.b,匹配class="a"的元素

四、偽類選擇器

偽類與偽元素的區別:

css引入偽類和偽元素概念是為了格式化文檔樹以外的信息。也就是說，偽類和偽元素是用來修飾不在文檔樹中的部分，比如，一句話中的第一個字母，或者是列表中的第一個元素。下面分別對偽類和偽元素進行解釋：

偽類用於當已有元素處於的某個狀態時，為其添加對應的樣式，這個狀態是根據用戶行為而動態變化的。比如說，當用戶懸停在指定的元素時，我們可以通過:hover來描述這個元素的狀態。雖然它和普通的css類相似，可以為已有的元素添加樣式，但是它只有處於dom樹無法描述的狀態下才能為元素添加樣式，所以將其稱為偽類。

偽元素用於創建一些不在文檔樹中的元素，並為其添加樣式。比如說，我們可以通過:before來在一個元素前增加一些文本，並為這些文本添加樣式。雖然用戶可以看到這些文本，但是這些文本實際上不在文檔樹中。

1、動態偽類選擇器：

a:link ，匹配所有未被點擊的鏈接

a:visited ，匹配所有已被點擊的鏈接

a:hover ，匹配滑鼠懸停其上的a元素

a:active ，匹配滑鼠已經其上按下、還沒有釋放的a元素

E :focus ,選擇獲取焦點的輸入欄位

2：UI元素偽類選擇器：

E:checked ： {attribute}，匹配所有用戶界面（form表單）中處於選中狀態的元素E

E:enabled ： {attribute}，匹配所有用戶界面（form表單）中處於可用狀態的E元素

E:disabled ： {attribute}，匹配所有用戶界面（form表單）中處於不可用狀態的E元素

E::selection ： {attribute}，匹配E元素中被用戶選中或處於高亮狀態的部分

3：結構偽類選擇器：

:root()選擇器，從字面上我們就可以很清楚的理解是根選擇器，他的意思就是匹配元素E所在文檔的根元素。在HTML文檔中，根元素始終是<html>。「:root」選擇器等同於<html>元素

:not()選擇器稱為否定選擇器，和jQuery中的:not選擇器一模一樣，可以選擇除某個元素之外的所有元素。

:empty()選擇器表示的就是空。用來選擇沒有任何內容的元素，這裡沒有內容指的是一點內容都沒有，哪怕是一個空格。

:target()選擇器來對頁面某個target元素(該元素的id被當做頁面中的超鏈接來使用)指定樣式，該樣式只在用戶點擊了頁面中的超鏈接，並且跳轉到target元素後起作用

:first-child()選擇器表示的是選擇父元素的第一個子元素的元素E。簡單點理解就是選擇元素中的第一個子元素

: last-child匹配元素的最後一個子元素。

:nth-child根據元素的位置匹配一個或者多個元素

（它接受一個an+b形式的參數，an+b匹配到的元素示例如下：

1n+0，或n，匹配每一個子元素。

2n+0，或2n，匹配位置為2、4、6、8…的子元素，該表達式與關鍵字even等價。

2n+1匹配位置為1、3、5、7…的子元素、該表達式與關鍵字odd等價。

3n+4匹配位置為4、7、10、13…的子元素。）

:nth-last-child()從某父元素的最後一個子元素開始計算，來選擇特定的元素

：first-of-type匹配屬於其父元素的首個特定類型的子元素的元素。

:nth-of-type與nth-child相似，不同之處在於它是只匹配特定類型的元素。

五、偽元素選擇器

偽元素概念：

E::before在被選元素前插入內容。需要使用content屬性來指定要插入的內容。被插入的內容實際上不在文檔樹中。

E::after在被元素後插入內容，其用法和特性與:before相似

E::first-letter匹配元素中文本的首字母。被修飾的首字母不在文檔樹中。

E:first-line匹配元素中第一行的文本。這個偽元素只能用在塊元素中，不能用在內聯元素中。

E::selection匹配用戶被用戶選中或者處於高亮狀態的部分。

E::placeholder匹配佔位符的文本，只有元素設置了placeholder屬性時，該偽元素才能生效

計算選擇器的優先順序

簡單情況：

優先順序從高到低分別是：

在屬性後面使用 !important 會覆蓋頁面內任何位置定義的元素樣式

作為style屬性寫在元素標籤上的內聯樣式

Id選擇器

類選擇器

偽類選擇器

屬性選擇器

標籤選擇器

通配符選擇器

瀏覽器自定義

複雜場景：

如有多種選擇器組合使用，同時選中某元素，直接計算a,b,c,d的值

行內樣式 <div stylex="xxx"></div> ==> a

ID 選擇器 ==> b

類，屬性選擇器和偽類選擇器 ==> c

標籤選擇器、偽元素 ==> d

abcd優先順序依次降低