样式化列表中的前 10 个项目答案

【问题标题】：Styling the first 10 items in a list样式化列表中的前 10 个项目
【发布时间】：2012-02-17 13:45:46
【问题描述】：

可以使用 li:nth-child 之类的东西来设置列表中前十项的样式吗？

<ol>
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
  <li>item 4</li>
  <li>item 5</li>
  <li>item 6</li>
  <li>item 7</li>
  <li>item 8</li>
  <li>item 9</li>
  <li>item 10</li>
  <li>item 11</li>
  <li>item 12</li>
</ol>

所以 1 到 10 会很花哨，而 11 和 12 会很正常。如果可能，我宁愿不使用课程。

【问题讨论】：

标签： css

【解决方案1】：

第n个孩子的例子：

:nth-child(-n+10)

这在这里工作：link。

更多了解这个请查看site。

我想如果你想要 IE 支持，我真的不能让它更漂亮。至少我不知道如何使用这种廉价的黑客。

ul>li + li + li + li + li + li + li + li + li + li + li{
    text-align: center; /*makes everything after 10 centered*/

}

http://jsfiddle.net/TzLqZ/ 上面的例子

这是 IE 方式，前 10 个居中，后 2 个正常： http://jsfiddle.net/TzLqZ/3/

ol>li{
    text-align: center;
    color: blue;
}
ol>li+li+li+li+li+li+li+li+li+li+li
{
    text-align: left;
    color: red;
}

【讨论】：

@JohnRiselvato oops 没有注意到您的帖子再次，因为我正在编辑我的帖子。想尝试第三种方法吗？ ;)
我想不出第三种方法？仅使用第 n 个孩子。
@Hawken 创建了一个支持的 IE :D
@JohnRiselvato 我猜你赢了。你到底是从哪里学来的？
我知道 > 给一个元素的直接子元素。我对+ li + li 业务充满信心。幸运的是它有点工作。

【解决方案2】：

我认为您正在寻找这里看到的第 n 个子伪选择器 http://css-tricks.com/how-nth-child-works/ 我想你想做什么：

选择除前十名之外的所有内容：

ul li:nth-child(n+11){}

或者只是前十名：

ul li:nth-child(-n+10){}

应该可以解决问题。

但是，根据文章，Internet Explorer 至少在 ie8 之前不支持此功能。所以不要在任何关键的事情上依赖它（虽然我不知道什么儿童特定的样式会是关键的）。

【讨论】：

有更好的方法来利用 nth-child。
@JohnRiselvato Editied 在您发表评论之前发现 :)