Question

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

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;
}

我在这里做错了什么？我只需要为第一个和多个孩子获得替代颜色。

Answer 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选择器。

基于第n个子选择器的标题的替代颜色

1 个答案: