本文通过一个具体的案例探讨了CSS中:nth-of-type选择器的使用误区，并解释了它的工作原理及正确用法。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.test:nth-of-type(1) {
background: pink;
}
</style>
</head>
<body>
<h1>123</h1>
<p>123</p>
<h1 class="test">123</h1>
<h1 class="test">123</h1>
</body>
</html>
最近同事碰到一个问题 background: pink;不生效，我看了一下官方文档。
.test:nth-of-type(1) {
background: pink;
}
这种写法本来就是不对的，但是也生效，他的作用是 获取 类为test 元素(标签)的父元素(标签)下和test相同元素(标签)的元素(标签)。所以说，我们最好还是按照官方的来。
扫一扫
5918
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
