极客观点
项目管理
HarmonyOS
<!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>
实在是想不出为什么没有会选不中,Why?
我的理解是：
h1.test标签的父元素下的第一个有.test类的元素。
.test:nth-of-type(1)要符合
是其父元素内具有相同标签名兄弟元素的第一个元素
有.test这个类
所以题主想要改变第三行的<h1 class="test">123</h1>背景色，选择器条件符合第二条不符合第一条
可以测试下，.test:nth-of-type(2)既是第2个h1, 又有.test，符合条件
:nth-of-type(n) 选择器匹配属于父元素的特定类型的第 N 个子元素的每个元素.
所以页面结构应该这样写
<h1>123</h1>
<p>123</p>
<div>
<h1 class="test">123</h1>
<h1 class="test">123</h1>
</div>.test:nth-of-type(1)是两个条件
第一个：是test类的元素
第二个：匹配在文档树中第1个相同标签名兄弟元素的元素
第一行<h1>123</123>符合第二条，却不符合第一条，所以无法匹配
其他行符合第一条，却不符合第二条，所以无法匹配
3 回答5.4k 阅读✓ 已解决
5 回答2.1k 阅读
2 回答2.1k 阅读✓ 已解决
3 回答2.6k 阅读
2 回答1.1k 阅读✓ 已解决
2 回答2.2k 阅读
2 回答876 阅读✓ 已解决
谢邀，应该这么玩
然后来解释：
https://developer.mozilla.org...
.test:nth-of-type(1)意思是在当前平级dom节点中所有h1标签又同时是第1个节点的标签，改变背景色。