Question

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

我正在使用CSS来设置第一个li样式，但它也为每个辅助级别li中的第一个ul设置样式，所以如何才能将其设置为仅li样式{1}}其中包含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

您必须使用immediate child selector：

ul > li:first-child

此规则会影响仅<li>前面的<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>

Answer 4

<style>
    ul > li:first-child, ul > li:last-child
    {
        width: 800px;
        border:1px solid #fc5604; border-top-width:thin; (2px)
    }
</style>

Answer 5

如果您想使用jQuery，可以使用以下内容：

$('#nav > ul li').first().css('background-color', 'red');
$('#nav > ul li').last().css('background-color', 'red');

^应该做的伎俩。

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

5 个答案: