Question

给出以下无序的嵌套列表结构：

<ul id="nestedList">
    <li>
        Item A
        <ul>
            <li>Item A Descrip</li>
        </ul>
    </li>
    <li>
        Item B
        <ul>
            <li>Item B Descrip</li>
        </ul>
    </li>
    <li>
        Item C
        <ul>
            <li>Item C Descrip</li>
        </ul>
    </li>
</ul>

我需要使用哪种jQuery选择器来设置顶级li元素（Item A，Item B等）的样式而不是“Descrip”li元素？

我尝试使用.children（）选择器，jQuery文档说它只选择所选元素的直接子元素，但我尝试的所有内容都设置了整个列表或只有第二级li元素。

这是我正在使用的jQuery：

$('#nestedList').children().css('font-weight', 'bold');

和

$('ul#nestedList').children().css('font-weight', 'bold');

更新我为此创建了一个jsFiddle，所以请随意搞砸......

Answer 1

“但我尝试的所有内容都设置了整个列表”

这是因为放置在顶层的样式是从顶层样式继承的。

您需要在嵌套列表上覆盖这些样式。

$('#nestedList').children().css('font-weight', 'bold')
                .find('li').css('font-weight','normal');

工作示例： http://jsfiddle.net/w66rK/

Answer 2

试试这个

$('#nestedList > li').css('font-weight', 'bold');

Answer 3

$('#nestedList > li')

http://api.jquery.com/child-selector/

Answer 4

使用直接CSS最简单：

#nestedList > li {
    /* direct li descendants of the parent ul */
    /* CSS */
}

同样的选择器当然适用于jQuery：

$('#nestedList > li').css('color','red'); // etc...

如何设置嵌套列表的顶级元素的样式

4 个答案: