// HTML代码 <ul> <li>列表项1</li> <li>列表项2</li> <li>列表项3</li> <li>列表项4</li> <li>列表项5</li> </ul> // CSS代码 li:eq(2) { color: red; }
上面的代码选择了<ul>列表中第三个(索引为2)<li>元素并将其文字颜色设置为红色。注意,eq()选择器的索引位置从0开始计数。
需要注意的是,eq()选择器并不是CSS3规范的一部分,而属于jQuery库中的方法。在用纯CSS样式中,大家不推荐使用eq()选择器,而是使用:nth-child(n)选择器,它可以选择某个元素以及它后面所有的同级元素,n为该元素在所有同级元素中的位置。
// CSS代码 li:nth-child(3) { color: red; }
上面的代码与之前的例子效果一样,都将<ul>列表中第三个元素的文字颜色设置为红色。