CSS3 基礎 1 選擇器詳解

css3選擇器詳解

一、屬性選擇器

在css3中，追加了三個屬性選擇器分別為：[att*=val]、[att^=val]和[att$=val]，使得屬性選擇器有了萬用字元的概念。

選擇器示例

描述[attribute^=value]

選擇每乙個src屬性的值以"https"開頭的元素

[attribute$=value]

[src$=".pdf"]

選擇每乙個src屬性的值以".pdf"結尾的元素

[attribute*=value]

[src*="runoob"]

選擇每乙個src屬性的值包含子字串"runoob"的元素

示例:**

說明

div[class^="test"]

設定class屬性值以"test"開頭的所有div元素的背景顏色

[class^="test"]

設定class屬性值以"test"開頭的所有元素的背景顏色

div[class$="test"]

設定class屬性值以"test"結尾的所有div元素的背景顏色

[class$="test"]

設定class屬性值以"test"結尾的所有元素的背景顏色

div[class*="test"]

設定class屬性值包含"test"的所有div元素的背景顏色

[class*="test"]

設定class屬性值包含"test"的所有元素的背景顏色

二、結構性偽類選擇器（一）

選擇器示例

描述結構性偽元素選擇器

:first-letter

p:first-letter

選擇每乙個元素的第乙個字母

:first-line

p:first-line

選擇每乙個元素的第一行

:before

p:before

在每個元素之前插入內容

:after

p:after

在每個元素之後插入內容

結構性偽類選擇器：共同特徵是允許開發者根絕文件中的結構來指定元素的樣式

:root

選擇文件的根元素

:not(selector)

:not(p)

選擇每個並非p元素的元素

:empty

p:empty

選擇每個沒有任何子級的p元素（包括文字節點）

:target

#news:target

選擇當前活動的#news元素（包含該錨名稱的點選的url）

①每個元素之後插入內容： p:after

②設定html文件的背景色： :root

:root選擇器用匹配文件的根元素，在html中根元素始終是html元素。

③為每個並非元素的元素設定背景顏色： :not(p)

④指定空的p元素的背景色： p:empty

:empty選擇器選擇每個沒有任何子級的元素（包括文字節點）。

⑤:target選擇器可用於當前活動的target元素的樣式,只能用id標識

2 313 14

15 jump to new content 1

16 jump to new content 2

17 click on the links above and the :target selector highlight the current active html anchor.

18new content 1...

19new content 2...

20 21

三、結構性偽類選擇器（二）

選擇器示例

描述:first-child

p:first-child

指定只有當元素是其父級的第乙個子級的樣式。

:last-child

p:last-child

選擇每個p元素是其父級的最後乙個子級。

:nth-child(n)

p:nth-child(2)

選擇每個p元素是其父級的第二個子元素

:nth-last-child(n)

p:nth-last-child(2)

選擇每個p元素的是其父級的第二個子元素，從最後乙個子項計數

:nth-of-type(n)

p:nth-of-type(2)

選擇每個p元素是其父級的第二個p元素

:nth-last-of-type(n)

p:nth-last-of-type(2)

選擇每個p元素的是其父級的第二個p元素，從最後乙個子項計數

①指定父元素中最後乙個p元素的背景色： p:last-child

②指定每個p元素匹配同型別中的倒數第2個同級兄弟元素背景色： p:nth-last-child(2)

③:nth-child(n)選擇器匹配父元素中的第n個子元素，n可以是乙個數字，乙個關鍵字(奇偶數等關鍵字)，或者乙個公式。該索引的第乙個子節點是1。

④:nth-of-type(n)選擇器匹配同型別中的第n個同級兄弟元素，n可以是乙個數字，乙個關鍵字，或者乙個公式。該索引的第乙個子節點是1。

p:nth-of-type(odd)

p:nth-of-type(even)

⑤使用公式（an+ b）.描述：a代表乙個迴圈的大小，n是乙個計數器（從0開始），以及b是偏移量。在這裡，我們對所有索引是3的倍數的p元素指定了背景顏色： p:nth-child(3n+0)

⑥:only-child擇器匹配屬於父元素中唯一子元素的元素。 p:only-child

四、ui元素狀態偽選擇器

在css3的選擇器中，除了結構性偽類選擇器外，還有一種ui元素狀態偽類選擇器。這類選擇器的共同特徵是：指定的樣式只有當元素處於某種狀態下時才起作用，在預設狀態下不起作用。在css3中，共有17種ui元素狀態偽類選擇器。

選擇器示例

描述:link

a:link

選擇所有未訪問鏈結

:active

a:active

選擇活動鏈結

:hover

a:hover

選擇滑鼠在鏈結上面時

:focus

input:focus

選擇具有焦點的輸入元素(選中)

:checked

input:checked

選擇每個選中的輸入元素

①:hover在滑鼠移到鏈結上時新增的特殊樣式。

注意:為了產生預期的效果，在 css 定義中，:hover 必須位於 :link 和 :visited 之後！

②:focus選擇器用於選擇具有焦點的元素。

乙個輸入字段獲得焦點時選擇的樣式：input:focus

1 211 12 點選文字輸入框表單可以看到黃色背景:

1317注意::focus 作用於 ie8,doctype 必須已宣告

18 19

③:checked 選擇器匹配每個選中的輸入元素（僅適用於單選按鈕或核取方塊）。

為所有選中的輸入元素設定背景顏色：input:checked

1 212 1319

選擇器示例

描述:enabled

input:enabled

選擇每乙個已啟用的輸入元素

:disabled

input:disabled

選擇每乙個禁用的輸入元素

2 315 1626

五、通用兄弟元素選擇器：

它用來指定位於乙個父元素之中的某個元素之後的所有其他某個種類的兄弟元素所使用樣式。

如：同一div下的子p 元素，以「~」連線， div ~ p

css3 選擇器 CSS3選擇器詳解

css3在css2基礎上，增強或新增了許多特性，彌補了css2的眾多不足之處，使得web開發變得更為高效和便捷。比如說，同樣是乙個頭像，可能在低版本的瀏覽器中，頭像方的在高版本的瀏覽器中，頭像是圓的。漸進增強和優雅降級之間的不同面試題目由於css3普遍存在相容性問題，為了避免因相容性帶來的干擾...

CSS3選擇器詳解

本文最初發表於，並在github上持續更新前端的系列文章。歡迎在github上關注我，一起入門和高階前端。以下是正文。css3在css2基礎上，增強或新增了許多特性，彌補了css2的眾多不足之處，使得web開發變得更為高效和便捷。比如說，同樣是乙個頭像，可能在低版本的瀏覽器中，頭像方的在高版本的瀏...

CSS3 基礎 1 選擇器詳解

css3 選擇器 CSS3選擇器詳解

CSS3選擇器詳解

CSS3選擇器詳解

相關推薦