如何用CSS或jQuery设置第一个和最后一个li的样式？

Question

如何使用CSS或jQuery 设置第一个(顶级)li和最后一个(顶级)li的样式？

我正在使用CSS来设置第一个li样式,但它也是li每个二级中的第一个样式ul,所以我怎样才能将它设置为仅li包含Main 1和最后一个包含Main 6的样式？

这是我的代码:

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

Answer 1

您必须使用直接子选择器:

ul > li:first-child

此规则将影响<li>仅紧接在a之前的规则<ul>.这应该适用于jQuery和css.并非所有浏览器都可以使用伪类(尤其是last-child.

Answer 2

第一项非常简单,我看到你已经:first-child失败了.:last-child做同样的事情,但它在IE中的支持有限.但是,如果列表项的数量是固定的(在我看来),您实际上可以仅使用CSS来定位最后一项.注意!

li + li + li +li + li + li { background:pink; }

这是一个小提琴:http://jsfiddle.net/jgRZQ/1/

在+选择基本目标紧跟其后的兄弟(如果你的类型相匹配),所以它是你的方式计算到最后的一个问题.是的,这适用于IE7.:)

Answer 3

为第一个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>