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

ここで何が間違っていますか？最初と奇数の子の色を交互に取得する必要があります。

4

1 に答える 1

1

それ以外の

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

使用する

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

h3.tips:first-child最初の子が奇数の子であるため、現在のコードには冗長性があります。さらに悪いことに、コンマの代わりにセレクター間にスペースがあり、これにより意味が完全に変わり、どの要素もセレクターに一致しなくなります。

さらに、:nth-child見出しの間に要素があるため、ここでは適切ではありません。たとえば、2 番目の見出しはその親の 3 番目の子です (最初の見出しは最初の見出しで、2 番目の見出しは最初のp要素です)。要素の中で奇数の要素を一致させたい場合は、h3要素の間にどんな要素が現れても、セレクターh3を使用する必要があります。:nth-of-type

于 2013-09-22T04:43:48.343 に答える