css - 为列表中的前 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 是正常的。如果可能，我宁愿不使用类。

Answer 1

第 n 个 child 的例子:

:nth-child(-n+10)

这在这里工作:link .

了解更多信息请查看 site .

---

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

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