为具有子元素的 <li> 设置样式

Posted 2023-03-06

【中文标题】为具有子元素的 <li> 设置样式

【英文标题】：Style the <li> that has child elements

【发布时间】：2014-02-01 09:02:38

【问题描述】：

我正在尝试创建一个带有下拉子菜单功能的顶部菜单。 我想定位具有附加子菜单（子元素）的列表项。这样我就可以使用不同的颜色列表样式等来设置它们的样式。

html：

<nav>
    <ul><div id="logo">
            <img src="images/design/logo.png"  />
        </div>
        <li>Home</li>
        <li>Parrent Link
            <ul>
                <li>Child Link</li>
                <li>Child Link</li>
                <li>Parrent Link
                    <ul>
                        <li>Child Link</li>
                        <li>Child Link</li>
                        <li>Child Link</li>
                        <li>Child Link</li>
                        <li>Child Link</li>
                    </ul>
                </li>
            </ul>
        </li>
        <li>About</li>
        <li>Gallery</li>
        <li>Contact</li>
    </ul>
</nav>

因此每个 Parrent 链接都获得了不同于其他链接的另一种样式。

【问题讨论】：

nav > ul > li > ul > li > ul > li ... ?

你是什么意思？ DEMO HERE

最好的解决方案是给父 <li>'s 一个类

看看这个帖子***.com/questions/5281556/…

@Legarndary 看看我的解决方案。有用吗？

【参考方案1】：

您不能选择基于后代元素的元素。那么你不能有这样的选择器：

选择所有包含<ul> 标记的<li> 标记

其他方式可以

选择<li>标签内的所有<ul>标签

你能做的最好的就是分配一个班级：

<li>Child Link</li>
   <li>Child Link</li>
   <li class="sub">Parrent Link
      <ul>
        <li>Child Link</li>
        <li>Child Link</li>
        <li>Child Link</li>
        <li>Child Link</li>
        <li>Child Link</li>
      </ul>
    </li>

【讨论】：

很遗憾。如果我们可以在 CSS 中使用 XPath，那就太棒了。 //li[./ul]

【参考方案2】：

每次创建新列表时，我都会更改 ul.class。

这样，如果 ul li 有孩子，它会自动改变，如果我想在那里有孩子。

【参考方案3】：

您只需要使用 CSS 选择器，如下所示：

ul > li > li 
   // your css code here

W3C site 中有官方文档。

不需要你使用id's或class标签

【讨论】：

这样，您可以定位 ul 标签的所有 li 直接子代。并非所有li 元素都带有ul。 OP希望列表项有一个子菜单（子元素）

你是对的，对不起！我没有很好地理解这个问题，我编辑了我的答案，所以现在它针对列表元素

【参考方案4】：

你可以用 JQuery 做到这一点：example

$(function()
    $('li').each(function()   
        var parent = $(this).parent().parent();
        if(parent.is('li'))
            parent.addClass("colored");
         
    )
);

此解决方案假定您的 HTML 有效并且您正确使用了 <ul> 和 <li>。