標籤：開始 選取器 元素 blog 不包含 color yellow 總結 匹配
1、E:nth-child(n) 表示E父元素中的第n個位元組點,從前往後數
p:nth-child(1){background:red;}p:nth-child(odd){background:yellow;} /*匹配奇數行*/p:nth-child(even){background:blue;}/*匹配偶數行*/p:nth-child(2n-1){background:black;} /*匹配奇數行*/p:nth-child(3n){background:green;}
2、E:nth-last-child(n) 表示E父元素中的第n個位元組點，從後向前計算
p:nth-last-child(2n){background:red;}
3、E:nth-of-type(n) 表示E父元素中的第n個位元組點，且類型為E
p:nth-child(2) 找p標籤父級下的第二個子項目，並且這個元素還的是p標籤
p:nth-of-type(2) 找p標籤父級下的第二個p元素
4、E:nth-last-of-type(n)表示E父元素中的第n個位元組點，且類型為E,從後向前計算
5、E:empty 表示E元素中沒有子節點。注意：子節點包含文本節點
p:empty{background:red;}<body> <p></p> <p>p2</p> <p>p3</p> <p>p4</p> <p>p5</p> <p>p6</p></body>
6、E:first-child 表示E元素中的第一個子節點
7、E:last-child 表示E元素中的最後一個子節點
8、E:first-of-type 表示E父元素中的第一個子節點且節點類型是E的
9、E:last-of-type 表示E父元素中的最後一個子節點且節點類型是E的
10、E:only-child表示E元素中只有一個子節點。注意：子節點不包含文本節點
11、E:only-of-type 表示E的父元素中只有一個子節點，且這個唯一的子節點的類型必須是E 注意：子節點不包含文本節點
註：該選取器從1開始
CSS3知識點總結----結構選取器
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
