23. X:nth-last-child(n)
li:nth-last-child(2) { color: red; }
与X:nth-child(n)功能类似,不同的是它从一个序列的最后一个元素开始算起。上面例子中设定倒数第二个列表元素的字体颜色。
兼容浏览器:IE9+、Firefox、Chrome、Safari、Opera
24. X:nth-of-type(n)
ul:nth-of-type(3) { border: 1px solid black; }
与X:nth-child(n)功能类似,不同的是它匹配的不是某个序列元素,而是元素类型。例如上面的代码设置页面中出现的第三个无序列表ul的边框。
兼容浏览器:IE9+、Firefox、Chrome、Safari
25. X:nth-last-of-type(n)
ul:nth-last-of-type(3) { border: 1px solid black; }
与X:nth-of-type(n)功能类似,不同的是它从元素最后一次出现开始算起。上面例子中设定倒数第三个无序列表的边框
兼容浏览器:IE9+、Firefox、Chrome、Safari、Opera
26. X:first-child
:first-child伪类用于匹配一个序列的第一个元素。我们经常用它来实现一个序列的第一个元素或最后一个元素的上(下)边框,如:
ul:nth-last-of-type(3) { border: 1px solid black; }
兼容浏览器:IE7+、Firefox、Chrome、Safari、Opera
27. X:last-child
ul > li:last-child { border-bottom:none; }
与:first-child类似,它匹配的是序列中的最后一个元素。
兼容浏览器:IE9+、Firefox、Chrome、Safari、Opera
出处:css9.net
责任编辑:bluehearts
上一页 30个最常用css选择器解析 [5] 下一页 30个最常用css选择器解析 [7]
◎进入论坛网页制作、WEB标准化版块参加讨论,我还想发表评论。
|