Question

所以，我遇到了以下问题。我正在尝试使用nth-child将“标题”赋予所有不同的颜色。

我的HTML看起来像这样：

<header>
    <h1>Title<br />
    <span>Subtitle</span></h1>

    <p><strong>Heading</strong><br />
    text</p>
    <p><strong>Heading</strong><br />
    text</p>
    <p><strong>Heading</strong><br />
    text</p>
</header>

我的CSS看起来像这样：

header h1 {
    font-size: 4em;
    line-height: .65em;
}
header h1 span {
    font-size: .5em;
}
header p {
    font-size: .9em;
}
header p strong {
    font-size: 1.1em;
}
header p:nth-child(1) strong { color: #f3b200; }
header p:nth-child(2) strong { color: #d27b26; }
header p:nth-child(3) strong { color: #dc572e; }

如果没有<h1>，则效果很好，请查看Fiddle。

但是使用<h1>，它似乎将<h1>视为<p>。使最后的“标题”没有颜色。查看Fiddle。

我不明白为什么会这样。

Answer 1

因为如果nth-child找不到nth个匹配p元素的元素，那么它会失败，请改用<{3}}

header p:nth-of-type(1) strong { color: #f3b200; }
header p:nth-of-type(2) strong { color: #d27b26; }
header p:nth-of-type(3) strong { color: #dc572e; }

nth-of-type

Answer 2

通过添加另一个元素（<h1>），您在选择器中使用的索引现在关闭1 。您可能已经注意到，第二个演示中的标题颜色也向上移动了一个位置。

您可以只增加原始CSS上的索引以选择新位置

header p:nth-child(2) strong { color: #f3b200; }
header p:nth-child(3) strong { color: #d27b26; }
header p:nth-child(4) strong { color: #dc572e; }

但更好的解决方案是使用一个不同的CSS选择器nth-of-type伪类，它考虑了实际元素，如Alien先生的回答所示。

没有应用nth-child风格

2 个答案: