首頁 > 開發者 > JavaScript
H5與CS3權威下.19 選取器（2）結構性偽類別選取器，cs3.19
1.CSS中的偽類別選取器及虛擬元素
（1）與自訂的class類別選取器不同，偽類別選取器是CSS中已經定義好的選取器。
eg：a:link{color:#ff0000;}
（2）虛擬元素的使用方法：
選取器：虛擬元素{屬性：值}
選取器.類名：虛擬元素{屬性：值}
2.css中常用的虛擬元素選取器
（1）first-line：向某元素中的第一行文字使用樣式。
eg：
1 <p>虛擬元素選取器 <br>類別選取器</p>
1 p:first-line{background: pink;}
（2）first-letter：用於向某個元素中的文字的首字母（歐美文字）或是第一個字（中文或是日文等漢字）使用樣式。
eg：
1 <p>虛擬元素選取器 ,類別選取器</p>2 <p>Hello!</p>
1 p:first-letter{font-size: 20px;color:red;}
（3）before：用於在某個元素之前插入一些內容。
eg：
1 <ul>2 <li>linshuling</li>3 <li>linshuling</li>4 <li>linshuling</li>5 <li>linshuling</li>6 <li>linshuling</li>7 </ul>
1 ul{list-style: none;}2 li:before{content:"*";}
注意：如果content後面的內容不加雙引號，會出現錯誤。（Firefox版本為50.1.0）
li:before{content:*;}
也可以插入其他內容：
eg：
1 li:before{content:url(01.jpg);}
（4）after：用於在某個元素之後插入一些內容。
1 ul{list-style: none;}2 li:after{content:url(01.jpg);}
1 li:after{content:"0000";}
3.結構性偽類別選取器——允許開發人員根據文檔樹中的結構來指定元素的樣式。
（1）root選取器：將樣式綁定到頁面的根項目中。在HTML中頁面中指的是整個頁面的“<html>”部分。
eg：
1 :root{background: pink;}2 body{background: yellow;}
注意：
1 body{background: yellow;}
如果僅僅是定義body的背景顏色，而不定義：root，則整個頁面都會變成黃色。
（2）not選取器：對某個結構元素使用樣式，但是想排除這個結構下面的子結構元素，讓它不使用這個樣式，可以使用not選取器。
eg：
1 body :not(h1){color:red;font-size: 16px;}
1 <h1>hello!</h1>2 <ul>3 <li>linshuling</li>4 <li>linshuling</li>5 <li>linshuling</li>6 <li>linshuling</li>7 <li>linshuling</li>8 </ul>
注意：not選取器的使用格式，：not（h1），不能寫成not（“h1”），不然會出現錯誤。
（3）empty選取器：用來指定當元素中的內容為空白時使用的樣式。
eg：
1 <h1>hello!</h1>2 <ul>3 <li>linshuling</li>4 <li>linshuling</li>5 <li></li>6 <li>linshuling</li>7 <li>linshuling</li>8 </ul>
1 :empty{background: pink;}
（4）target選取器：用來對頁面中的某個target元素（該元素的id被當做頁面中的超連結來使用）指定樣式，該樣式只在使用者點擊了頁面中的超連結，並且跳轉到target元素後起作用。
eg：
1 <a href="#text1">執行個體文字1</a> 2 <a href="#text2">執行個體文字2</a> 3 4 <div id="text1"> 5 <h2>linshuling</h2> 6 </div> 7 8 <div id="text2"> 9 <h2>linshuling</h2>10 </div>
1 :target{2 background: pink;3 }
如上的例子，點擊“執行個體文字2”時，第二行的背景顏色會變為粉紅色。點擊“執行個體文字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
