css - ：nth-of-type()不起作用
本文介绍了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>
实在是想不出为什么没有会选不中,Why?
我的理解是：
h1.test标签的父元素下的第一个有.test类的元素。
解决方案
谢邀，应该这么玩
<!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 class="test">123</h1>
<p>123</p>
<h1 class="test">123</h1>
<h1 class="test">123</h1>
</body>
</html>然后来解释：
https://developer.mozilla.org...
CSS 伪类:nth-of-type(an+b) 匹配在文档树中前面有an+b-1个相同标签名兄弟元素的元素，此时n大于或等于0，并且该元素具有父元素。参见 :nth-child关于伪元素参数语法详细的说明. 如果你想在不受同胞异类元素和父元素影响保证自己选择相同类型得元素，这个伪元素更加灵活实用.
.test:nth-of-type(1)意思是在当前平级dom节点中所有h1标签又同时是第1个节点的标签，改变背景色。
这篇关于css - ：nth-of-type()不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
