一、first-child
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> /*含有li元素的第一個li元素*/ li:last-child{ background-color: red; } </style> </head> <body> <h1>first-child</h1> <ul> <li>第一個項目</li> <li>第二個項目</li> <li>第三個項目</li> <li>第四個項目</li> <li>第五個項目</li> <li>第六個項目</li> <li>第七個項目</li> </ul> </body></html>某個元素（x）：first-child 它的含義是選擇具有 x元素 的元素中的第一個 x元素
二、last-child
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> /* 含有li元素的元素的第一個li元素*/ li:last-child{ background-color: red; } </style> </head> <body> <h1>last-child</h1> <ul> <li>第一個項目</li> <li>第二個項目</li> <li>第三個項目</li> <li>第四個項目</li> <li>第五個項目</li> <li>第六個項目</li> <li>第七個項目</li> </ul> </body></html>某個元素（x）：last-child 它的含義是選擇具有 x元素 的元素中的最后一個 x元素
三、nth-child(一個數字,odd,even)
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> li:nth-child(odd){ background-color: red; } </style> </head> <body> <h1>nth-child</h1> <ul> <li>第一個項目</li> <li>第二個項目</li> <li>第三個項目</li> <li>第四個項目</li> <li>第五個項目</li> <li>第六個項目</li> <li>第七個項目</li> </ul> </body></html>某個元素（x）：nth-child(指定數字) 它的含義是選擇具有 x元素 的元素中的第指定數字個 x元素 某個元素（x）：nth-child(odd) 它的含義是選擇具有 x元素 的元素中的第奇數個 x元素 某個元素（x）：nth-child(even) 它的含義是選擇具有 x元素 的元素中的第偶數個 x元素
四、nth-last-child(一個數字,odd,even) 關于這個選擇器跟nth-child（）的區別在于nth-child（）選擇元素時為正著數的（從上往下數），如第二個為偶。然而nth-last-child則為相返，nth-last-child則往與之相返反，它是倒著數的（從下往下數），如倒數第二個為偶。
五、注意事項 nth-child()和nth-last-child()這兩個選擇器它們有一個坑，他們數的方式（子元素的排列方式）包括不同元素?？创a理解下
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> li:nth-child(3){ background-color: red; } </style> </head> <body> <h1>注意事項</h1> <ul> <p>test</p> <li>第一個項目</li> <li>第二個項目</li> <li>第三個項目</li> <li>第四個項目</li> <li>第五個項目</li> <li>第六個項目</li> <li>第七個項目</li> </ul> </body></html>代碼中我新添了一個p元素，然后更換選擇器為li:nth-child(3)然后第二個li元素被為選中了，這是因為nth-child()和nth-last-child()他們的選擇方式包括所有子元素的。例如“li:nth-child(3）”如果被選中的元素的父元素只有Li沒有其它元素的話，就可選擇到第三個，但是在它前面如果有其它元素，他就是第四個所以選擇不到。為了解決這樣的問題，就有了另外一種選擇器。就是第六種。
六、nth-of-type()和nth-last-of-type()
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> li:nth-of-type(3){ background-color: red; } </style> </head> <body> <h1>nth-of-type、nth-last-of-type</h1> <ul> <p>test</p> <li>第一個項目</li> <li>第二個項目</li> <li>第三個項目</li> <li>第四個項目</li> <li>第五個項目</li> <li>第六個項目</li> <li>第七個項目</li> </ul> </body></html>把選擇器改為nth-of-type(3)樣式做用到了第三個Li元素，因為nth-of-type()數的方式（子元素的排列方式），只包括指定元素如li，以指定子元素來進行排序。nth-last-of-type相關特效跟nth-of-type一樣，只是它是倒著數的。 七、only-child
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> li:only-child{ background-color: red; } </style> </head> <body> <h1>only-child</h1> <ul> <li>第一個項目</li> <li>第二個項目</li> <li>第三個項目</li> <li>第四個項目</li> <li>第五個項目</li> <li>第六個項目</li> <li>第七個項目</li> </ul> <ul><li>test</li></ul> </body></html>我新增了一ul元素，并且給了他一個子元素li。發現樣式作用到了我新增的ul里面的li里。由此知道only-child選擇的是只含有一個指定元素，注意是只含有一個指定元素，例如代碼中的ul元素只含有一個li元素一樣，不能有第二個子元素。 八：總結 結構偽類選擇器者都是根據元素中含有什么特定的子元素來進行選擇的。last就是倒著數（排列方式）。
新聞熱點
疑難解答
