关于E:nth-of-type的问题
chocolatl opened this issue · 4 comments
chocolatl commented
今天用E:nth-of-type
选择器遇到了一个坑,E:nth-of-type
中的E
貌似只能是元素选择器,问题记录在这里了:nth-of-type选择器中的坑。
不知道是我使用姿势不正确还是的确只能作用于元素选择器,希望能在手册中给出这个问题说明。
doyoe commented
文档中的说明模块下的第一句话:“匹配同类型中的第n个同级兄弟元素E”。
其实已经清楚的描述了,不过应该是说明性的文字不够直白,所以容易被忽视。你可以把这句话的中 "E" 改成 "div" 来理解,那么这句话就变成了:“匹配同类型中的第n个同级兄弟元素div”
doyoe commented
我在考虑将描述尽可能改成更直白的文字
doyoe commented
调整完了,有时间你可以再看看,是否还有不好理解的地方
chocolatl commented
感谢你的解答,当时我应该是没有理解.class:nth-of-type(2)
中没有E
的时候是怎么选择的:
.class:nth-of-type(2) {
background: yellow;
}
.class:nth-of-type(3) {
background: red;
}
<div>
<h1 class="class">1</h1>
<h2>2</h2>
<h2 class="class">3</h2><!-- yellow -->
<h2>4</h2>
<h1>5</h1>
<h1 class="class">6</h1><!-- red -->
</div>
现在想了想.class:nth-of-type(2)
应该等价于*.class:nth-of-type(2)
,会选择父元素下每个不同类型元素的集合中的第二个,并且拥有.class
类的元素。
当时脑子糊了,现在终于想明白了😓