Question

我正在设计我网站的主菜单样式，我想在无序列表中添加一个类到第一个和最后一个LI元素，但仅顶部的第一个和最后一个项目水平。

<div id="primary-menu-container" class="menu">
    <div id="menu-icon">Menu</div>
    <ul id="primary-menu" class="hover sf-menu">
        <li><a href="#">Fabrics</a></li>
        <li><a href="#">Contemporary</a></li>
        <li><a href="#>Vinyl</a></li>
        <li><a href="#">Gold</a></li>
        <li><a href="#">History</a></li>
        <li><a href="#">Test Tag</a>
            <ul class="sub-menu">
                <li><a href="#">Testing</a></li>
                <li><a href="#">news</a></li>
            </ul>
        </li>
    </ul>
</div>

第一个很容易，因为第一个li总是一个顶级列表元素。我对目标最后一个感到困惑，因为最后一个顶级列表元素上可能有一个子菜单。

没有选择解决方案，但是根据how to add class into last li of first level

的部分回复

我尝试了以下内容，它适用于第一项，但将“last”类添加到“Test Tag”及其所有子项，而我只希望将此类添加到“Test Tag”li中。

$("#primary-menu > li:first").addClass("first");
$("#primary-menu > li:last").addClass("last");

这是我的小提琴。

http://jsfiddle.net/tdcf7/1/

Answer 1

修正：http://jsfiddle.net/tdcf7/3/

.last > a{ color: red }

没有将课程添加到所有后代;你的CSS选择器（.last a）只是用类来选择单个项目的所有后代。

通过使用子选择器而不是后代，上面的修补程序仅选择<a>直接与该类<li>的子项相关联。

或者 - 如果很难准确选择你想要的内容 - 你可以随时将样式应用于所有后代，然后覆盖不正确的后代：

li           { color:green } /* default style            */
li.last *    { color:red   } /* hit 'em all!             */
li.last ul * { color:green } /* ooh...but not these ones */

Answer 2

你的javascript很好，这是你的CSS也使子列表变红。

.last > a{ color: red;}

>会导致它只影响直系后代

将类添加到第一级的最后一个li中

2 个答案: