css3结构伪类选择

2024-04-27 15:05:28

字体：大中小

来源：转载

供稿：网友

一、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()这两个选择器它们有一个坑，他们数的方式（子元素的排列方式）包括不同元素。看代码理解下

<!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就是倒着数（排列方式）。

上一篇：实战React音乐播放器

下一篇：Webpack + Tomcat + Nginx/Apache实现前后端开发分离