本文主要是介绍css选择器中 first-of-type, last-of-type, nth-of-type 中的坑，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
说明
nth-of-type, first-of-type, last-of-type属于同一类的选择器, first-of-type 就等于 nth-of-type(1)
当使用类选择器和它们连用时,得尤其注意其所代表的意义,我当时第一次使用的时候,卡了好久,一度以为出了bug,在此记录一下.
比如.class:nth-of-type(i)所选出的是同时符合以下条件的html元素:
- 类属性中包含
class - 包含该属性的标签类型是它父元素下同标签类型的第 i 个
示例
html代码如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文档标题</title>
</head>
<body><h1>我的第1个HTML页面</h1><div>我的第2个HTML页面</div><h1 class="test">我的第3个HTML页面</h1><p class="test">我的第4个HTML页面</p><h1 class="test test1">我的第5个HTML页面</h1><div>我的第6个HTML页面</div><h1>我的第7个HTML页面</h1>
</body>
</html>css代码如下
.test{color:red
}
.test:first-of-type{ /* 第二条 */color:blue
}
.test1:nth-of-type(3){ /* 第三条 */color:green;
}显示结果如下
可以仔细注意一下第二条css语法所起的作用:
- 它不会让”我的第1个HTML页面”变蓝;
- 它不会让”我的第3个HTML页面”变蓝;
- 它会让”我的第4个HTML页面”变蓝;
注意第三条css语法所起的作用:
- 它会让”我的第5个HTML页面”变绿;
P.S 我的学习日记,如有不对请指出,谢谢!
这篇关于css选择器中 first-of-type, last-of-type, nth-of-type 中的坑的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
