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”的规则是覆盖它。

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

Answer 1

所以我查看了this answer，但在我阅读this one之前我并不完全理解。

“nth-of-type”规则不适用于类;它只关注元素的类型。因此，我的第一个.copy块被第n个类型（2）规则作为目标的原因是因为它是第二个div。

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

谢谢大家！

编辑：至于解决方案，我只针对＆amp;：nth-child（5），＆amp;：nth-child（8）。因为他们都是那个级别的div，所以没有必要使用nth-type。幸运的是，这个页面的布局是硬编码的，因此这些索引不会很快改变。如果是，我可能会通过JavaScript定位它们并应用类或其他东西。

Answer 2

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

这是一个简短的例子，可以得出答案：

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

Answer 3

：nth-of-type在所选择的给定类的 type 元素中寻找（＆＃34; .item.copy＆＃34;）。元素是一个div，因此css规则应用于html结构级别的div。

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

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

请注意HTML结构中的级别。当li元素中嵌套链接（总是一个链接中的链接）时会出现一个常见错误，那么当你想要定位每一个第二个链接时，你必须这样写：

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

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

nth-of-type（2）的目标是第一类？

3 个答案: