Question

怎么在CSS内自由定义变量？

动态创建了一组div列表，类似于这样
<div id="div1">内容1</div>
<div id="div2">内容2</div>
<div id="div3">内容3</div>
...
现在我想让id以奇数结尾的div背景为红色，id以偶数结尾的div背景为蓝色，如此交替，怎样在CSS里实现？

Answer 1

用伪类:nth-child就可以做到了，不过你的这些DIV需要有一个父级元素，例如下面这样：

<div class="container">
<div id="div1">内容1</div>
<div id="div2">内容2</div>
<div id="div3">内容3</div>
...
</div>

然后在CSS里面只要作下面的定义就行了：

.container:nth-child(2n-1) {background:red;}
.container:nth-child(2n) {background:blue;}

这是一个CSS3的样式，如果需要让它兼容IE8及以下浏览器的话，就要引入jquery库和一个js小插件，可以用下面的写法：
<script type="text/javascript" src="jquery.min.js"></script>

<!--[if (gte IE 6)&(lte IE 8)]>
<script src="selectivizr.js"></script>
<![endif]-->

其中selectivizr.js这个百度一下就能找到的，是一个很小的JS文件，专门解决一些CSS3下的选择器不兼容早期浏览器的问题的。

Answer 2

如果是IE下的话,你倒是可以试试这样定义CSS
div {
background-color:expression(parseInt(this.id.replace(/\D/gi,''))%2==0?'#0000FF':'#FF0000');
}
但不是所有浏览器都支持CSS中使用expression的

Answer 3

不要用id 用class
<div class="line">内容1</div>
<div class="line">内容2</div>
<div class="line">内容3</div>

.line:nth-child(odd) { background-color: red; }
.line:nth-child(even) { background-color: blue; }

IE版本低于9不支持:nth-child

Answer 4

css里面无法实现，只能自己手动设置奇数偶数div的背景色
要想自动实现，需要用js

Answer 5

.line:odd { background-color: red; }
.line:even { background-color: blue; }
IE6下需要插入一张类库才能使用