基于 nth-child 选择器的标题的替代颜色答案

【问题标题】：Alternate colors for headers based on nth-child selector基于 nth-child 选择器的标题的替代颜色
【发布时间】：2013-09-27 05:11:49
【问题描述】：

我正在尝试创建备用颜色标题而不向其声明各种标题样式。我决定使用 nth-child 选择器，但似乎无法创建我需要的颜色。

JSFiddle：http://jsfiddle.net/CRh6L/

HTML：

<h3 class="tips">Header 1</h3>
<p class="tips">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ac purus neque. Nunc feugiat neque et eleifend lacinia. Proin a nunc imperdiet lacus placerat malesuada. Nam est libero, egestas sit amet leo nec, tempus placerat velit. Mauris pellentesque arcu eget pellentesque imperdiet. Mauris quis est lacinia, sodales nisl sit amet, dapibus ante. Ut quis arcu eleifend, ultrices tortor id, convallis arcu. Integer ut libero vitae dolor pretium porta. Phasellus sed bibendum lorem, in sodales tortor. Integer rutrum a orci non luctus.</p>

    <h3 class="tips">Header 2</h3>
    <p class="tips">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ac purus neque. Nunc feugiat neque et eleifend lacinia. Proin a nunc imperdiet lacus placerat malesuada. Nam est libero, egestas sit amet leo nec, tempus placerat velit. Mauris pellentesque arcu eget pellentesque imperdiet. Mauris quis est lacinia, sodales nisl sit amet, dapibus ante. Ut quis arcu eleifend, ultrices tortor id, convallis arcu. Integer ut libero vitae dolor pretium porta. Phasellus sed bibendum lorem, in sodales tortor. Integer rutrum a orci non luctus.</p>


    <h3 class="tips">Header 3</h3>
    <p class="tips">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ac purus neque. Nunc feugiat neque et eleifend lacinia. Proin a nunc imperdiet lacus placerat malesuada. Nam est libero, egestas sit amet leo nec, tempus placerat velit. Mauris pellentesque arcu eget pellentesque imperdiet. Mauris quis est lacinia, sodales nisl sit amet, dapibus ante. Ut quis arcu eleifend, ultrices tortor id, convallis arcu. Integer ut libero vitae dolor pretium porta. Phasellus sed bibendum lorem, in sodales tortor. Integer rutrum a orci non luctus.</p><br><br>


        <h3 class="tips">Header 4</h3>
        <p class="tips">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ac purus neque. Nunc feugiat neque et eleifend lacinia. Proin a nunc imperdiet lacus placerat malesuada. Nam est libero, egestas sit amet leo nec, tempus placerat velit. Mauris pellentesque arcu eget pellentesque imperdiet. Mauris quis est lacinia, sodales nisl sit amet, dapibus ante. Ut quis arcu eleifend, ultrices tortor id, convallis arcu. Integer ut libero vitae dolor pretium porta. Phasellus sed bibendum lorem, in sodales tortor. Integer rutrum a orci non luctus.</p>

CSS：

p.tips {
    padding:10px 30px 20px 30px;
    font-size:14pt;
}

h3.tips {
    padding:0px 30px 0px 30px;
    font-family:OpenSans-Semibold, San-Serif;
    font-size:20pt;
    color:#E74C3C;
}

h3.tips:first-child h3.tips:nth-child(odd) {
    color:blue;
}
h3.tips:last-child {
    color:#C0392B;
}

我在这里做错了什么？我只需要为第一个和奇数个孩子获得备用颜色。

【问题讨论】：

我相信你的语法应该是“tips h3 {”和tips:nth-child h3 {“。标题是次要的div。也许是tips h3:nth-child”。如果您不高兴，请尝试 dt 和 dd 代替。在第二个 CSS 声明中也缺少逗号来分隔第一个和第 n 个。

标签： html css css-selectors

【解决方案1】：

代替

h3.tips:first-child h3.tips:nth-child(odd)

使用

h3.tips:nth-of-type(odd)

您当前的代码有多余的h3.tips:first-child，因为第一个孩子是奇数孩子。更糟糕的是，选择器之间有一个空格，而不是逗号，这完全改变了含义，因此没有任何元素可以匹配选择器。

此外，:nth-child 不适合这里，因为标题之间有元素。例如，您的第二个标题是其父项的第三个子项（第一个是第一个标题，第二个是第一个 p 元素）。当您希望匹配h3 元素中的奇数时，无论h3 元素之间可能出现什么元素，您都需要使用:nth-of-type 选择器。

【讨论】：

我明白了。非常感谢您的详细解释。