nth-of-type(2) 是针对第一个类型的？

Question

我有一个相对模块化的页面，但由于 CMS，其中一些段落块的内容没有填满整个块，所以我只想增加一些块的字体大小。但是，当我尝试定位 2 和 3 时，它似乎根本无法识别。事实上，它的目标只是第一个，在我的检查，它说，它是因为它的应用规则2。

示例 HTML

<div class="container">
    <div class="item video">
        <!-- HTML for video stuffs-->
    </div>
    <div class="item copy">
        <h1>Example Title</h1>
        <p>Example words</p>
    </div>
    <div class="item photo">
        <!-- HTML for photo stuffs-->
    </div>
    <div class="item video">
        <!-- HTML for video stuffs-->
    </div>
    <div class="item copy">
        <h1>Example Title</h1>
        <p>Example words</p>
    </div>
    <div class="item photo">
        <!-- HTML for photo stuffs-->
    </div>
    <div class="item video">
        <!-- HTML for video stuffs-->
    </div>
    <div class="item copy">
        <h1>Example Title</h1>
        <p>Example words</p>
    </div>
    <div class="item photo">
        <!-- HTML for photo stuffs-->
    </div>
    <div class="item video">
        <!-- HTML for video stuffs-->
    </div>
    <div class="item copy">
        <h1>Example Title</h1>
        <p>Example words</p>
    </div>
    <div class="item photo">
        <!-- HTML for photo stuffs-->
    </div>
</div>

现在我的 LESS 文件如下所示：

.container {
    .item {
        &.copy {
            p {
                font-size: 16px;
            }
            &:nth-of-type(2), &:nth-of-type(3) {
                p {
                    font-size: 17px;
                }
            }
        }
    }
}

理论上，第一个和第四个.copy块中的段落文本的字体大小应该是16px，而第二个和第三个块应该是17px。但是，我看到的是，它们都是 16px，第一个是 17px，突出显示是因为“.container .item.copy:nth-of-type(2) p”的规则是覆盖它。

为什么 nth-of-type(2) 规则针对其类型的第一个块而不是第二个？如果 nth-of-type(3) 规则不是针对它类型的第二个块，如果它是这样计算它们的，为什么不呢？我对这里发生的事情感到很困惑......非常感谢任何帮助。

Answer 1

所以我看了这个答案，但直到我读到这个我才完全理解它。

“nth-of-type”规则不适用于类；它只查看元素的类型。所以我的第一个 .copy 块被第 nth-of-type(2) 规则定位的原因是因为它是第二个 div。

太糟糕了，类没有简单的等价物。如果有，请告诉我！

谢谢大家！

编辑：至于解决方案，我只是针对 &:nth-child(5), &:nth-child(8)。由于它们都是该级别的 div，因此不需要 nth-of-type。幸运的是，这个页面的布局是硬编码的，所以这些索引不会很快改变。如果是，我可能会通过 JavaScript 定位它们并应用类或其他东西。

Answer 2

:nth-of-type 在选定的给定类（“.item.copy”）的类型元素中查找。该元素是一个 div，因此 css 规则应用于 html 结构级别的 div。

解决方案是使用 :nth-child 在 html 结构级别中查找具有给定类（“.item.copy”）的所有元素。它可用于选择几乎所有重复的模式。这是因为你可以这样写：

.item:nth-child(2n - 1) {} // This targets 1st, 3rd, 5th, 7th,...

请注意 HTML 结构中的级别。当 li 元素中嵌套有链接（li 中始终有一个链接）时，会出现一个常见错误，那么当您想要定位每隔一个链接时，您必须像这样编写：

ul li:nth-child(2n) {
    a {
        //style the link
    }
}

对于使用 nth-child 选择器，有一个非常有用的功能： https://css-tricks.com/examples/nth-child-tester/