CSS 如何使用css选择前2个<li>元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18672625/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to select first 2 <li> elements using css
提问by rajesh
Hi i want to apply css for first 2 elements (one,two) that are adjacent to first <p>element.
嗨，我想为与第一个<p>元素相邻的前 2 个元素（一个，两个）应用 css 。
<div class="one">
<ul>
<p>
<li>One</li>
<li>Two</li>
<p>
<li>Four</li>
<li>Five</li>
</ul>
</div>
Following getting applied to all 4 lielements
在应用于所有 4 个li元素之后
.one ul p:nth-child(odd) ~ li {
background: lightsteelblue;
}
回答by Vahid Hallaji
For first 2 lielements inside ul ptry:
对于li里面的前 2 个元素，请ul p尝试：
.one ul li:nth-child(-n+3){
// your style
}
See on jsfiddle
And as other mates mentioned: you have invalid markup.
正如其他伙伴所提到的：您的标记无效。
If you removed pelement, try:
如果您删除了p元素，请尝试：
.one ul li:nth-child(-n+2){
// your style
}
See on jsfiddle
Update:My suggestion is to use another ulinstead of p: So you have valid markup and same result:
更新：我的建议是使用另一个ul而不是p：所以你有有效的标记和相同的结果：
HTML
HTML
<div class="one">
<ul>
<li>0</li>
<li>
<ul>
<li>One</li>
<li>Two</li>
<li>3</li>
</ul>
<li>
<li>Four</li>
<li>Five</li>
</ul>
</div>
CSS:
CSS：
.one ul {
padding: 0;
list-style-type: none;
}
.one ul ul li:nth-child(-n+2){
// your style
}
Note:As your last comment, If you have only 2 special lielement, Why not define a class name simply... <li class="bold">Do it simple
注意：作为您的最后一条评论，如果您只有 2 个特殊li元素，为什么不简单地定义一个类名...<li class="bold">做简单点
ul li.bold {
// your style
}
回答by Nathan J.B.
This should be compatible with IE8 (uses CSS 2.1 selectors only):
这应该与 IE8 兼容（仅使用 CSS 2.1 选择器）：
li:first-child, li:first-child+li {
color: blue;
}
回答by mkas
First three elements you can select with e.g.
您可以选择的前三个元素，例如
ul li:nth-of-type(-n+3) {
}
But like others mentioned, your markup is invalid and you should definitely correct it.
但是就像其他人提到的那样，您的标记无效，您绝对应该更正它。
回答by RayLuo
Like others already mentioned, the straightforward answer would be li:nth-child(-n+2) { ... }.
就像其他人已经提到的那样，直接的答案是li:nth-child(-n+2) { ... }.
I don't know about you, but when I first learn this -n+2part, my reaction was "what? is this a typo?". So, for those who like to know a little explanation rather than just copy-and-paste the counter-intuitive magic, here I include a link to a wonderful blog post by Sara Copeexplaining the -n+2part:
我不了解你，但当我第一次学习这-n+2部分时，我的反应是“什么？这是一个错字吗？”。因此，对于那些喜欢了解一些解释而不是仅仅复制和粘贴违反直觉的魔法的人来说，在这里我提供了一个链接，指向Sara Cope解释该-n+2部分的精彩博客文章：
The syntax for selecting the first n number of elements is a bit counter-intuitive. You start with -n, plus the positive number of elements you want to select. For example, li:nth-child(-n+2) will select the first 2 li elements.
选择前 n 个元素的语法有点违反直觉。您以 -n 开头，加上要选择的元素的正数。例如， li:nth-child(-n+2) 将选择前 2 个 li 元素。
Such explanation is even missing in the w3cshool for nth-child.
在w3csool 中，对于 nth-child甚至没有这样的解释。
