0

我正在设计我网站的主菜单的样式，我想为无序列表中的第一个和最后一个 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 始终是顶级列表元素。我对最后一个目标感到困惑，因为最后一个顶级列表元素上可能有一个子菜单。

没有选择解决方案，但根据以下一些回复：如何将类添加到第一级的最后一个 li

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

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

这是我的小提琴。​</p>

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

4

2 回答 2

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 */
于 2012-04-11T19:16:15.090 回答
0

您的 javascript 很好，是您的 CSS 也使子列表变为红色。

.last > a{ color: red;}

这>将导致它只影响直系后代

于 2012-04-11T19:19:28.500 回答