每隔一個文字造型

Question

我想讓我的網站新聞風格。

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

等等。 顏色應該是每隔其他文字更改。

我該怎麼做？因爲一個div用於所有新聞！和一個CSS。

Answer 1

如果你有單獨的元素的消息在一個容器中，像這樣：

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

Answer 2

你可以使用JQuery。

例如，如果新聞條目在列表中，你可以這樣做：

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

這將例如設置奇數鏈接（如在第一，第三等）鏈接到紅色，偶數（第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 3

如果網站只是一個靜態網站，我會這樣的風格;

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 4

HTML：

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

CSS：

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