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

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

Answer 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之前做不支持。所以不要依赖它来做任何重要的事情（虽然我不知道具体的儿童样式会是什么样的关键）。

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

2 个答案: