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

所有其他文字样式

4 个答案: