1-2:CSS3課程入門之結構選擇
阿新 • • 發佈：2017-09-23
偶數 css3 first 文本 adding head oct empty 第一個
E:nth-child(n) 表示E父元素中的第n個字節點 p:nth-child(odd){background:red}/*匹配奇數行*/ p:nth-child(even){background:red}/*匹配偶數行*/ p:nth-child(2n){background:red} E:nth-last-child(n) 表示E父元素中的第n個字節點，從後向前計算 E:nth-of-type(n) 表示E父元素中的第n個字節點，且類型為E E:nth-last-of-type(n)表示E父元素中的第n個字節點，且類型為E,從後向前計算 【先理解nth-of-type(n)】
E:empty 表示E元素中沒有子節點。註意：子節點包含文本節點 ,例如<p></p>不能存在空格
E:first-child 表示E元素中的第一個子節點
E:last-child 表示E元素中的最後一個子節點
E:first-of-type 表示E父元素中的第一個子節點且節點類型是E的
E:last-of-type 表示E父元素中的最後一個子節點且節點類型是E的
E:only-child表示E元素的父元素只有一個子節點。註意：子節點不包含文本節點，【<div><b></b></div> b:only-child】
E:only-of-type 表示E的父元素中只有一個子節點，且這個唯一的子節點的類型必須是E。註意：子節點不包含文本節點【
<p><span>123</span><a href="">456</a></p>
p *:only-of-type
/*父級下某類型的標簽僅有一個時該唯一元素會被選中*/
】
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible"content="IE=edge"> <title>last-of-type與last-child區別</title> <style> *{margin:0; padding:0;} body *:last-of-type{ height:30px; line-height:30px; border:1px solid red; background:yellow; margin-bottom:5px; } </style> </head> <body> <p>001</p> <h5>111</h5> <p>002</p> <p>003</p> <h5>222</h5> <p>004</p> <p>005</p> </body> </html>
1-2:CSS3課程入門之結構選擇