在列表中为前10个项目设置样式

Question

像 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将会是普通的。如果可能的话，我宁愿不使用类。

- Trevor Nowak

Answer 1

nth childs示例：

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

​

​

- John Riselvato

---

@JohnRiselvato 哎呀，我没注意到你的帖子再次，因为我正在编辑我的帖子。想要尝试比赛第三种方法吗？;) - Hawken

我想不出第三种方法了，仅使用nth-child。 - John Riselvato

@Hawken 创建了一个支持IE的:D。 - John Riselvato

@JohnRiselvato 我猜你赢了。你到底在哪里学的？ - Hawken

我知道>可以选择一个元素的直接子元素。但是我对于+ li + li这个写法还是有些不确定。幸运的是，它似乎能够正常工作。 - John Riselvato

Answer 2

我认为你正在寻找nth-child伪选择器，可以在此处http://css-tricks.com/how-nth-child-works/看到相关信息。 我认为你想要做的是： 选择除前10个之外的所有内容：

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

或者只是前十名：

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

应该可以解决问题。

然而，根据文章所说，至少在ie8之前，Internet Explorer 不支持这个功能。因此，在关键事项上不要依赖它（尽管我不知道哪些特定的样式会是关键的）。

- Hawken

---

有更好的方法利用nth-child。 - John Riselvato

@JohnRiselvato 编辑 发现你发表评论之前 :) - Hawken