html - 使用 CSS3 :nth-child() Selector

<分区>

这个问题是由于错别字或无法再重现的问题引起的。虽然类似的问题可能是on-topic在这里，这个问题的解决方式不太可能帮助 future 的读者。

关闭 8 年前。

我的 CSS/HTML 在这里:

    p:nth-child(2) {
        background: #ff0000;
    }

<h1>This is a heading</h1>
<p>The first paragraph.</p>
<p>The second paragraph.</p>
<p>The third paragraph.</p>
<p>The fourth paragraph.</p>

结果在 <p>The first paragraph.</p> 行显示红色

为什么？我认为它必须显示红色 <p>The second paragraph.</p> .

最佳答案

nth-child() 选择特定元素，如果它是父元素的第 n 个(在你的例子中是第 2 个)子元素。

在这里你需要使用 nth-of-type() 来选择元素类型(假设是 p)，如果它是其父元素类型的第 n 个(在你的例子中是第 2 个)

p:nth-of-type(2) {
  background: red;
}

<h1>This is a heading</h1>
<p>The first paragraph.</p>
<p>The second paragraph.</p>
<p>The third paragraph.</p>
<p>The fourth paragraph.</p>

关于html - 使用 CSS3 :nth-child() Selector，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27689335/

相关文章：

javascript - 带有垂直文本的 CSS 垂直按钮