最全CSS3選擇器

2021-07-30 22:56:34 字數 3423 閱讀 6967

一,css3 選擇器分類

二,選擇器語法

1,基本選擇器語法

選擇器

型別

功能描述

*通配選擇器 

選擇文件中所以html元素

e元素選擇器

選擇指定型別的html元素

#idid選擇器

選擇指定id屬性值為「id」的任意型別元素

.class

類選擇器

選擇指定class屬性值為「class」的任意型別的任意多個元素

selector1,selectorn

群組選擇器

將每乙個選擇器匹配的元素集合並

2,層次選擇器語法

選擇器

型別

功能描述

e  f

後代選擇器(包含選擇器)

選擇匹配的f元素,且匹配的f元素被包含在匹配的e元素內

e>f

子選擇器

選擇匹配的f元素,且匹配的f元素所匹配的e元素的子元素

e+f相鄰兄弟選擇器

選擇匹配的f元素,且匹配的f元素緊位於匹配的e元素的後面

e~f通用選擇器

選擇匹配的f元素,且位於匹配的e元素後的所有匹配的f元素

3,動態偽類選擇器語法

選擇器

型別

功能描述

e:link

鏈結偽類選擇器  

選擇匹配的e元素,而且匹配元素被定義了超連結並未被訪問過。常用於鏈結描點上

e:visited  

鏈結偽類選擇器

選擇匹配的e元素,而且匹配元素被定義了超連結並已被訪問過。常用於鏈結描點上

e:active

使用者行為選擇器

選擇匹配的e元素,且匹配元素被啟用。常用於鏈結描點和按鈕上

e:hover

使用者行為選擇器

選擇匹配的e元素,且使用者滑鼠停留在元素e上。ie6及以下瀏覽器僅支援a:hover

e:focus

使用者行為選擇器

選擇匹配的e元素,而且匹配元素獲取焦點

4,目標偽類選擇器

選擇器

功能描述

e:target

選擇匹配e的所有元素,且匹配元素被相關url指向

5,ui元素狀態偽類選擇器語法

選擇器

型別

功能描述

e:checked

選中狀態偽類選擇器

匹配選中的複選按鈕或者單選按鈕表單元素

e:enabled

啟用狀態偽類選擇器

匹配所有啟用的表單元素

e:disabled

不可用狀態偽類選擇器

匹配所有禁用的表單元素

6,結構偽類選擇器使用語法

選擇器

功能描述

e:fisrt-child

作為父元素的第乙個子元素的元素e。與e:nth-child(1)等同

e:last-child

作為父元素的最後乙個子元素的元素e。與e:nth-last-child(1)等同

e:root

選擇匹配元素e所在文件的根元素。在html文件中,根元素始終是html,此時該選擇器與html型別選擇器匹配的內容相同

e f:nth-child(n)

選擇父元素e的第n個子元素f。其中n可以是整數(1,2,3)、關鍵字(even,odd)、可以是公式(2n+1),而且n值起始值為1,而不是0.

e f:nth-last-child(n)

選擇父元素e的倒數第n個子元素f。此選擇器與e:nth-child(n)選擇器計算順序剛好相反,但使用方法都是一樣的,其中:nth-last-child(1)始終匹配最後乙個元素,與last-child等同

e:nth-of-type(n)

選擇父元素內具有指定型別的第n個e元素

e:nth-last-of-type(n)

選擇父元素內具有指定型別的倒數第n個e元素

e:first-of-type

選擇父元素內具有指定型別的第乙個e元素,與e:nth-of-type(1)等同

e:last-of-tye

選擇父元素內具有指定型別的最後乙個e元素,與e:nth-last-of-type(1)等同

e:only-child

選擇父元素只包含乙個子元素,且該子元素匹配e元素

e:only-of-type

選擇父元素只包含乙個同型別子元素,且該子元素匹配e元素

e:empty

選擇沒有子元素的元素,而且該元素也不包含任何文字節點

注:(1),「ul>li:nth-child(3)」表達的並不是一定選擇列表ul元素中的第3個子元素li,僅有列表ul中第3個li元素前不存在其他的元素,命題才有意義,否則不會改變列表第3個li元素的樣式。

(2),:nth-child(n)  中引數只能是n,不可以用其他字母代替。

(3),:nth-child(odd) 選擇的是奇數項,而使用:nth-last-child(odd) 選擇的卻是偶數項

7,否定偽類選擇器

選擇器

功能描述

e:not(f)

匹配所有除元素f外的e元素

8,屬性選擇器語法

選擇器

功能描述

[attribute]

用於選取帶有指定屬性的元素。

[attribute=value]

用於選取帶有指定屬性和值的元素。

[attribute~=value]

用於選取屬性值中包含指定詞彙的元素。

[attribute|=value]

用於選取帶有以指定值開頭的屬性值的元素,該值必須是整個單詞。

[attribute^=value]

匹配屬性值以指定值開頭的每個元素。

[attribute$=value]

匹配屬性值以指定值結尾的每個元素。

[attribute*=value]

匹配屬性值中包含指定值的每個元素。

注:例其中a[class="links"] 是找不到匹配元素,只有a[class="links item"]才匹配

最全CSS3選擇器

一,css3 選擇器分類 二,選擇器語法 1,基本選擇器語法 選擇器 型別 功能描述 通配選擇器 選擇文件中所以html元素 e元素選擇器 選擇指定型別的html元素 idid選擇器 選擇指定id屬性值為 id 的任意型別元素 class 類選擇器 選擇指定class屬性值為 class 的任意型別...

最全CSS3選擇器

一,css3 選擇器分類 二,選擇器語法 1,基本選擇器語法 選擇器 型別 功能描述 通配選擇器 選擇文件中所以html元素 e元素選擇器 選擇指定型別的html元素 idid選擇器 選擇指定id屬性值為 id 的任意型別元素 class 類選擇器 選擇指定class屬性值為 class 的任意型別...

最全CSS3選擇器

一,css3 選擇器分類 二,選擇器語法 1,基本選擇器語法 選擇器型別 功能描述 通配選擇器 選擇文件中所以html元素 e元素選擇器 選擇指定型別的html元素 idid選擇器 選擇指定id屬性值為 id 的任意型別元素 class 類選擇器 選擇指定class屬性值為 class 的任意型別的...