css - 其他所有文字样式

Question

我想让我的网站新闻风格化。

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

和其他类似的。颜色应该是每隔一个文本改变一次。

我怎样才能做到这一点？因为一个 div 用于所有新闻！和一个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

如果您在容器中的单独元素中有消息，如下所示：

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