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

【问题标题】：nth-of-type(2) is targeting the first of type?nth-of-type(2) 是针对第一个类型的？
【发布时间】：2015-07-07 21:34:49
【问题描述】：

我有一个相对模块化的页面，但由于 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) 规则不针对其类型的第二个块？我对这里发生的事情感到非常困惑......非常感谢任何帮助。

【问题讨论】：

标签： html css css-selectors less

【解决方案1】：

于是我看了this answer，但是直到我看了this one才完全明白。

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

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

谢谢大家！

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

【讨论】：

【解决方案2】：

这是 W3schools 的所有 CSS 选择器的有用备忘单（您可以使用它）：Try CSS selector

这里有一个简短的例子可以得出答案：

li:nth-of-type(2) 表示：
所有 <li> 元素是其父元素的第二个 <li> 元素。

【讨论】：

【解决方案3】：

:nth-of-type 在所选给定类（“.item.copy”）的 type 元素中查找。该元素是一个 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/

【讨论】：