nth-of-type 无法按预期工作

Question

<div class="test">
    <div class="test1"></div>
    <div class="test2"></div>
    <div class="test3"></div>
</div>

为什么

.test3:nth-of-type(3) {height: 100px;background: black;}

工作，但是

.test3:nth-of-type(1) {height: 100px;background: black;}

不是？在这种情况下，第 n 个类型的工作与第 n 个孩子相同吗？

Answer 1

第 nth-of-type 伪选择器肯定会按预期在这里工作。

来自MDN：

:nth-of-type(an+b) CSS 伪类匹配文档树中具有相同元素名称的 an+b-1 兄弟元素的元素

所以

.test3:nth-of-type(3) {height: 100px;background: black;}

“有效”，因为类 test3 的 div 也恰好是容器中的第三个 div（带有类 test 的 div）

然而

.test3:nth-of-type(1) {height: 100px;background: black;}

不选择 test3 div，因为它不是容器中的第一个 div

是nth-of-type工作一样nth-child在这种情况下？

在这种情况下，它们是相同的，因为容器中的所有子项都是 div。

一般来说，当伪类处于伪类描述的状态时，将伪类视为仅匹配匹配选择器的子集（即冒号之前的选择器部分）的过滤器可能会有所帮助。

因此，例如.test:hover意味着：选择具有类 test 的所有元素 - 但仅选择那些被悬停的元素。

同样，这里的 nth-of-type:.test3:nth-of-type(3)表示：

选择类 test3 的所有元素，但前提是它是容器中该类型元素的第 3 个。

所以拿下面的演示：

.test3:nth-of-type(3) {height: 100px;background: black;}

.test3:nth-of-type(1) {height: 100px;background: black;}

请注意，第三个列表项和第三个 span 都设置了样式 - 那是因为它们都有 class test 并且是它们容器中那种元素的第三个

注意：

当使用nth-of-type伪类而不用类型选择器限制它时-所有类型都将匹配- 就像使用了通用选择器一样。

例如：

.test:nth-of-type(3) 相当于 *.test:nth-of-type(3)

演示：

.test:nth-of-type(3) {
  color:red;
}

<div>
  <ul>
    <li class="test">li 1</li>
    <li class="test">li 2</li>
    <li class="test">li 3</li>
    <li class="test">li 4</li>
    <li class="test">li 5</li>
  </ul>
  <span class="test">span 1</span>
  <span class="test">span 2</span>
  <span class="test">span 3</span>
  <span class="test">span 4</span>
  <span class="test">span 5</span>
</div>