可以使用像 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 是普通的。
如果可能的话,我宁愿不使用课程。
第 n 个孩子的例子:
:nth-child(-n+10)
这在这里工作:link http://css-tricks.com/examples/nth-child-tester/.
有关理解这一点的更多信息请查看此site http://css-tricks.com/how-nth-child-works/.
我想如果你想要 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/ http://jsfiddle.net/TzLqZ/上面的例子
这是 IE 方式,前 10 个为中心,后 2 个为普通:http://jsfiddle.net/TzLqZ/3/ 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;
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)