CSS选择第1-n个同类元素

选择第1-n个(前几个)同类元素需要用到选择器nth-child,用法如下:

li:nth-child(-n 6) {

color: red;

}

为什么能这么用

nth-child计算时n是从0开始算的。就以上示例来说,刚开始n是0,匹配第6个元素;接着n变为1,匹配第5个元素;然后n变为2,匹配第4个元素……直到n等于后面的数字时,计算结果变为了0,匹配不到任何元素。当然,之后n再变大也匹配不到元素了。

注意:nth-child括号里面的最终结果值m,指的是父元素的第m个子元素,而不是同类元素顺序中的第m个元素。例如,要给下面div中的内容 "bbb" 加上红色,

<div>

<h1>aaa</h1>

<p>bbb</p>

<p>ccc</p>

</div>

css应为:

p:nth-child(2) {

background:#ff0000;

}

注意此处nth-child里面的值是2,而不是1。

代码示例

<!DOCTYPE>

<html>

<head>

<title>Test Sample</title>

<style>

 li:nth-child(-n 6) {

  color: red;

 }

</style>

</head>

<body>

<ul>

 <li>111</li>

 <li>222</li>

 <li>333</li>

 <li>444</li>

 <li>555</li>

 <li>666</li>

 <li>777</li>

 <li>888</li>

 <li>999</li>

</ul>

</body>

</html>

运行效果