標籤：關鍵字 visit charset 屬性選取器 mem :active pre 迴圈 tle
CSS3選取器詳解
一、 屬性選取器
在CSS3中，追加了三個屬性選取器分別為：[att*=val]、[att^=val]和[att$=val]，使得屬性選取器有了萬用字元的概念。
選取器 |
樣本 |
描述 |
[attribute^=value] |
[src^="https"] |
選擇每一個src屬性的值以"https"開頭的元素 |
[attribute$=value] |
[src$=".pdf"] |
選擇每一個src屬性的值以".pdf"結尾的元素 |
[attribute*=value] |
[src*="runoob"] |
選擇每一個src屬性的值包含子字串"runoob"的元素 |
樣本:
代碼 |
說明 |
div[class^="test"]{background:#ffff00;} |
設定class屬性值以"test"開頭的所有div元素的背景顏色 |
[class^="test"]{background:#ffff00;} |
設定class屬性值以"test"開頭的所有元素的背景顏色 |
div[class$="test"]{background:#ffff00;} |
設定class屬性值以"test"結尾的所有div元素的背景顏色 |
[class$="test"]{background:#ffff00;} |
設定class屬性值以"test"結尾的所有元素的背景顏色 |
div[class*="test"]{background:#ffff00;} |
設定class屬性值包含"test"的所有div元素的背景顏色 |
[class*="test"]{background:#ffff00;} |
設定class屬性值包含"test"的所有元素的背景顏色 |
二、結構性偽類別選取器（一）
選取器 |
樣本 |
描述 |
結構性虛擬元素選取器 |
||
:first-letter |
p:first-letter |
選擇每一個<P>元素的第一個字母 |
:first-line |
p:first-line |
選擇每一個<P>元素的第一行 |
:before |
p:before |
在每個<p>元素之前插入內容 |
:after |
p:after |
在每個<p>元素之後插入內容 |
結構性偽類別選取器：共同特徵是允許開發人員根絕文檔中的結構來指定元素的樣式 |
||
:root |
:root |
選擇文檔的根項目 |
:not(selector) |
:not(p) |
選擇每個並非p元素的元素 |
:empty |
p:empty |
選擇每個沒有任何子級的p元素（包括文本節點） |
:target |
#news:target |
選擇當前活動的#news元素（包含該錨名稱的點擊的URL） |
①每個<p>元素之後插入內容： p:after{ content:"- Remember this"; }
②設定HTML文檔的背景色： :root{ background:#ff0000; }
:root選取器用匹配文檔的根項目，在HTML中根項目始終是HTML元素。
③為每個並非<p>元素的元素設定背景顏色： :not(p) { background:#ff0000; }
④指定空的p元素的背景色： p:empty { background:#ff0000; }
:empty選取器選擇每個沒有任何子級的元素（包括文本節點）。
⑤:target選取器可用於當前活動的target元素的樣式,只能用id標識
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>菜鳥教程(runoob.com)</title> 6 <style> 7 :target{ 8 border: 2px solid #D4D4D4; 9 background-color: #e5eecc;10 }11 </style>12 </head>13 <body>14 <h1>This is a heading</h1>15 <p><a href="#news1">Jump to New content 1</a></p>16 <p><a href="#news2">Jump to New content 2</a></p>17 <p>Click on the links above and the :target selector highlight the current active HTML anchor.</p>18 <p id="news1"><b>New content 1...</b></p>19 <p id="news2"><b>New content 2...</b></p>20 </body>21 </html>
三、結構性偽類別選取器（二）
選取器 |
樣本 |
描述 |
:first-child |
p:first-child |
指定只有當<p>元素是其父級的第一個子級的樣式。 |
: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{ background:#ff0000; }
②指定每個p元素匹配同類型中的倒數第2個同級兄弟元素背景色： p:nth-last-child(2){ background:#ff0000; }
③:nth-child(n)選取器匹配父元素中的第n個子項目，n可以是一個數字，一個關鍵字(奇偶數等關鍵字)，或者一個公式。該索引的第一個子節點是1。
④:nth-of-type(n)選取器匹配同類型中的第n個同級兄弟元素，n可以是一個數字，一個關鍵字，或者一個公式。該索引的第一個子節點是1。
p:nth-of-type(odd){background:#ff0000;}
p:nth-of-type(even){background:#0000ff;}
⑤使用公式（an+ b）.描述：a代表一個迴圈的大小，N是一個計數器（從0開始），以及b是位移量。 在這裡，我們對所有索引是3的倍數的p元素指定了背景顏色： p:nth-child(3n+0){ background:#ff0000; }
⑥:only-child擇器匹配屬於父元素中唯一子項目的元素。 p:only-child{background:#ff0000; }
四、UI元素狀態偽選取器
在CSS3的選取器中，除了結構性偽類別選取器外，還有一種UI元素狀態偽類別選取器。這類別選取器的共同特徵是：指定的樣式只有當元素處於某種狀態下時才起作用，在預設狀態下不起作用。在CSS3中，共有17種UI元素狀態偽類別選取器。
選取器 |
樣本 |
描述 |
:link |
a:link |
選擇所有未訪問連結 |
:active |
a:active |
選擇活動連結 |
:hover |
a:hover |
選擇滑鼠在連結上面時 |
:focus |
input:focus |
選擇具有焦點的輸入元素(選中) |
:checked |
input:checked |
選擇每個選中的輸入元素 |
①:hover在滑鼠移到連結上時添加的特殊樣式。
提示: :hover 選取器器可用於所有元素，不僅是連結。
提示: :link 選取器設定了未訪問過的頁面連結樣式, :visited 選取器設定訪問過的頁面連結的樣式 :active選取器設定當你點選連結時的樣式。
注意: 為了產生預期的效果，在 CSS 定義中，:hover 必須位於 :link 和 :visited 之後！
②:focus選取器用於選擇具有焦點的元素。
提示: :focus選取器接受鍵盤事件或其他使用者輸入的元素。
一個輸入欄位獲得焦點時選擇的樣式：input:focus{background-color:yellow;}
1 <html> 2 <head> 3 <meta charset="utf-8"> 4 <title></title> 5 <style> 6 input:focus{ 7 background-color:yellow; 8 } 9 </style>10 </head>11 <body>12 <p>點擊文本輸入框表單可以看到黃色背景:</p>13 <form>14 First name: <input type="text" name="firstname" /><br>15 Last name: <input type="text" name="lastname" />16 </form>17 <p><b>注意:</b> :focus 作用於 IE8,DOCTYPE 必須已聲明</p>18 </body>19 </html>
③:checked 選取器匹配每個選中的輸入元素（僅適用於選項按鈕或複選框）。
為所有選中的輸入元素設定背景顏色：input:checked { height: 50px; width: 50px; }
1 <html> 2 <head> 3 <meta charset="utf-8"> 4 <title></title> 5 <style> 6 input:checked { 7 height: 50px; 8 width: 50px; 9 }10 </style>11 </head>12 <body>13 <form action="">14 <input type="radio" checked="checked" value="male" name="gender" /> Male<br>15 <input type="radio" value="female" name="gender" /> Female<br>16 <input type="checkbox" checked="checked" value="Bike" /> I have a bike<br>17 <input type="checkbox" value="Car" /> I have a car18 </form>19 </body>20 </html>
選取器 |
樣本 |
描述 |
:enabled |
input:enabled |
選擇每一個已啟用的輸入元素 |
:disabled |
input:disabled |
選擇每一個禁用的輸入元素 |
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>菜鳥教程(runoob.com)</title> 6 <style> 7 input:enabled{ 8 background:#ffff00; 9 }10 input:disabled{11 background:#dddddd;12 }13 </style>14 </head>15 <body>16 <form action="">17 First name: <input type="text" value="Mickey" /><br>18 Last name: <input type="text" value="Mouse" /><br>19 Country: <input type="text" disabled="disabled" value="Disneyland" /><br>20 Password: <input type="password" name="password" />21 <input type="radio" value="male" name="gender" /> Male<br>22 <input type="radio" value="female" name="gender" /> Female<br>23 <input type="checkbox" value="Bike" /> I have a bike<br>24 <input type="checkbox" value="Car" /> I have a car 25 </form>26 </body>27 </html>
五、通用兄弟元素選取器：
它用來指定位於一個父元素之中的某個元素之後的所有其他某個種類的兄弟元素所使用樣式。
如：同一div下的子p 元素，以“~”串連， div ~ p{background-color:gold}
CSS3 基礎(1)——選取器詳解
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
