设置列表中前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个孩子的例子:

:nth-child(-n+10)

这在这里工作:链接.

更多关于理解这个检查这个网站.

我想如果你想要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;
}

​

​