css - その他すべてのテキスト スタイル

Question

私は自分のウェブサイトのニュースをスタイルにしたいと思っています。

first news : red
second news : blue
third news : red
fourth news : blue

などなど。色は、他のすべてのテキストを変更する必要があります。

どうやってやるの？1 つの div がすべてのニュースに使用されるためです。そして1つのcss。

Answer 1

JQueryを使用できます。

たとえば、ニュース項目がリストにある場合は、次のようにできます。

$(document).ready(function(){
  $('#menu li:nth-child(even)').addClass('blue-link');
  $('#menu li:nth-child(odd)').addClass('red-link');
});

たとえば、奇数番号のリンク (1 番目、3 番目など) は赤に、偶数番号 (2 番目、4 番目、6 番目など) のリンクは青に設定されます。

この例では、html は次のようになります。

<ul id="menu">
<li>first news</li>
<li>second news</li>
<li>third news</li>
<li>fourth news</li>
</ul>

フィドルの例: http://jsfiddle.net/XwCaL/

Answer 2

Web サイトが静的な Web サイトである場合は、次のようにスタイルを設定します。

HTML

<ul>
   <li class="red">News 1</li>
   <li class="blue">News 2</li>
   <li class="red">News 3</li>
   <li class="blue">News 4</li>
</ul>

CSS

.red {
   color:red;
}
.blue {
   color:blue;

}

Answer 3

次のように、コンテナー内の個別の要素にニュースがある場合:

<div id="news">
    <span>Some news 1</span>
    <span>Some news 2</span>
    <span>Some news 3</span>
    <span>Some news 4</span>
</div>

次に、この CSS を使用して、他のすべての子要素を簡単にスタイルできます。

#news span:nth-child(2n) {
    color: #f00; // 1st, 3rd, 5th...
}

#news span:nth-child(2n+1) {
    color: #00f; // 2nd, 4th, 6th...
}