如何使用 CSS 或 jQuery 设置第一个和最后一个 li 的样式？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8896938/
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 style the first and last li with CSS or jQuery?
提问by user520300
How can I style the first (top level) liand the last (top level) liwith CSS or jQuery?
如何使用 CSS 或 jQuery设置第一个（顶级）li和最后一个（顶级）li的样式？
I am using CSS to set the first listyle but it is also styling the first liin each secondary level ul, so how can I get it to style only the liwith Main 1 in it and the last one with Main 6 in it?
我正在使用 CSS 来设置第一个li样式，但它也在li每个二级级别中设置第一个样式ul，那么我怎样才能让它只设置li带有 Main 1 的样式和带有 Main 6 的最后一个样式？
Here is my code:
这是我的代码：
<style>
ul li:first-child
{
width: 800px;
border:1px solid #fc5604; border-top-width:thin; (2px)
}
</style>
and HTML:
和 HTML：
<div id="nav">
<ul>
<li><a href="#">Main 1</a>
<ul>
<li><a href="#">Sub 1a</a></li>
<li><a href="#">Sub 1b</a></li>
<li><a href="#">Sub 1c</a></li>
</ul>
</li>
<li><a href="#">Main 2</a>
<ul>
<li><a href="#">Sub 2</a></li>
</ul>
</li>
<li><a href="#">Main 3</a>
<ul>
<li><a href="#">Sub 3</a></li>
</ul>
</li>
<li><a href="#">Main 4</a>
<ul>
<li><a href="#">Sub 4</a></li>
</ul>
</li>
<li><a href="#">Main 5</a></li>
<li><a href="#">Main 6</a>
<ul>
<li><a href="#">Sub 6</a></li>
</ul>
</li>
</ul>
</div>
回答by Explosion Pills
You have to use the immediate child selector:
您必须使用直接子选择器：
ul > li:first-child
This rule will affect an <li>that is only immediately preceded by a <ul>. This should apply to both jQuery and css. Not all browsers can use the pseudo classes (especially last-child.
此规则将影响<li>仅紧跟在 a 之前的 a <ul>。这应该适用于 jQuery 和 css。并非所有浏览器都可以使用伪类（尤其是last-child.
回答by Nix
The first item is quite simple, and I see you already have the :first-childdown. :last-childdoes the same, but it has limited support in IE. However, if the number of list items are fixed (which it seems to me), you can actually target the last item with CSS alone. Observe!
第一项很简单，我看你已经有了:first-child羽绒。:last-child做同样的事情，但它在 IE 中的支持有限。但是，如果列表项的数量是固定的（在我看来），您实际上可以单独使用 CSS 来定位最后一项。观察！
li + li + li +li + li + li { background:pink; }
Here's a Fiddle: http://jsfiddle.net/jgRZQ/1/
这是一个小提琴：http: //jsfiddle.net/jgRZQ/1/
The +selector basically targets the immediate next sibling (if it matches your type), so it's a matter of counting your way to the last. And yes, this works in IE7. :)
在+选择基本目标紧跟其后的兄弟（如果它匹配您的类型），所以它是你的方式计算到最后的一个问题。是的，这适用于 IE7。:)
回答by Ali
Give a class name for first ul tag.
为第一个 ul 标签指定一个类名。
<div id="nav">
<ul class="list">
<li><a href="#">Main 1</a>
<ul>
<li><a href="#">Sub 1a</a></li>
<li><a href="#">Sub 1b</a></li>
<li><a href="#">Sub 1c</a></li>
</ul>...........
...................................
Then you can use like the following CSS:
然后你可以像下面这样使用 CSS：
<style>
ul.list > li:first-child{
width: 800px;
border:1px solid #fc5604; border-top-width:thin; (2px)
}
ul.list > li:last-child{
width: 800px;
border:1px solid #fc5604; border-top-width:thin; (2px)
}
</style>
回答by Reinstate Monica Cellio
<style>
ul > li:first-child, ul > li:last-child
{
width: 800px;
border:1px solid #fc5604; border-top-width:thin; (2px)
}
</style>
回答by sirmdawg
If you'd like to use jQuery you could use the following:
如果您想使用 jQuery，您可以使用以下命令：
$('#nav > ul li').first().css('background-color', 'red');
$('#nav > ul li').last().css('background-color', 'red');
^ should do the trick.
^ 应该可以解决问题。
