如何使用CSS或jQuery设置第一个和最后一个li的样式？
如何使用CSS或jQuery设置第一个和最后一个li的样式？
提问于 2012-01-17 23:07:19
如何使用CSS或jQuery设置第一个(顶层) li和最后一个(顶层) li的样式？
我使用CSS来设置第一个li样式，但它也设置了每个二级ul中的第一个li的样式，那么如何才能让它只设置包含MAIN1的li和包含MAIN6的最后一个样式呢？
下面是我的代码：
<style>
ul li:first-child
{
width: 800px;
border:1px solid #fc5604; border-top-width:thin; (2px)
}
</style>和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>回答 5
Stack Overflow用户
发布于 2012-01-17 23:09:18
ul > li:first-child此规则将影响仅紧跟在<ul>之前的<li>。这应该同时适用于jQuery和css。并不是所有的浏览器都可以使用伪类(尤其是last-child。
Stack Overflow用户
发布于 2012-01-18 01:13:01
第一项非常简单，我看到您已经关闭了:first-child。:last-child也做同样的事情，但它在IE中的支持有限。但是，如果列表项的数量是固定的(在我看来)，您实际上可以仅使用CSS来定位最后一项。观察！
li + li + li +li + li + li { background:pink; }这里有一把小提琴：http://jsfiddle.net/jgRZQ/1/
+选择器主要针对紧邻的下一个同级(如果它与您的类型匹配)，所以这是一个从最后一个开始计数的问题。是的，这在IE7中是有效的。:)
Stack Overflow用户
发布于 2014-08-05 17:39:03
为第一个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>...........
...................................然后，您可以像下面这样使用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>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/8896938
复制相关文章
相似问题