一、first-child
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> /*含有l(wèi)i元素的第一個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> /* 含有l(wèi)i元素的元素的第一個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(一個數(shù)字,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(指定數(shù)字) 它的含義是選擇具有 x元素 的元素中的第指定數(shù)字個 x元素 某個元素（x）：nth-child(odd) 它的含義是選擇具有 x元素 的元素中的第奇數(shù)個 x元素 某個元素（x）：nth-child(even) 它的含義是選擇具有 x元素 的元素中的第偶數(shù)個 x元素
四、nth-last-child(一個數(shù)字,odd,even) 關(guān)于這個選擇器跟nth-child（）的區(qū)別在于nth-child（）選擇元素時為正著數(shù)的（從上往下數(shù)），如第二個為偶。然而nth-last-child則為相返，nth-last-child則往與之相返反，它是倒著數(shù)的（從下往下數(shù)），如倒數(shù)第二個為偶。
五、注意事項 nth-child()和nth-last-child()這兩個選擇器它們有一個坑，他們數(shù)的方式（子元素的排列方式）包括不同元素。看代碼理解下
<!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()他們的選擇方式包括所有子元素的。例如“l(fā)i: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()數(shù)的方式（子元素的排列方式），只包括指定元素如li，以指定子元素來進(jìn)行排序。nth-last-of-type相關(guān)特效跟nth-of-type一樣，只是它是倒著數(shù)的。 七、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。發(fā)現(xiàn)樣式作用到了我新增的ul里面的li里。由此知道only-child選擇的是只含有一個指定元素，注意是只含有一個指定元素，例如代碼中的ul元素只含有一個li元素一樣，不能有第二個子元素。 八：總結(jié) 結(jié)構(gòu)偽類選擇器者都是根據(jù)元素中含有什么特定的子元素來進(jìn)行選擇的。last就是倒著數(shù)（排列方式）。
新聞熱點
疑難解答
