Альтернативные цвета для заголовков на основе селектора nth-child

Question

Альтернативные цвета для заголовков на основе селектора nth-child

0

Я пытаюсь создать альтернативные заголовки цветов без объявления различных стилей заголовка. Я решил использовать селектор 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;
}

Что я здесь делаю неправильно? Мне просто нужно получить альтернативные цвета для первых и нечетных детей.

Jeiman 22 сен. 2013, в 05:45

Источник

Теги:

html

css3

css-selectors

1 ответ

Ещё вопросы

Jukka K. Korpela · Accepted Answer · 2013-09-22T03-37-00.000Z

Вместо

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.

Я вижу хорошо Большое спасибо за подробное объяснение.