无序列表样式

Posted 2023-06-01 benjerry

li 
    list-style: none;

 

有没有办法只为嵌套无序列表的父元素设置样式？ [复制]

【中文标题】有没有办法只为嵌套无序列表的父元素设置样式？ [复制]

【英文标题】：Is there a way to style only parent elements of nested unordered lists? [duplicate]

【发布时间】：2012-06-20 13:43:56

【问题描述】：

可能重复：Is there a CSS parent selector?CSS selector for “foo that contains bar”?

我有一组嵌套的无序列表，我希望能够只设置具有子项的 <li> 父项的样式。 html 看起来像这样：

<ul>
    <li>item one</li>
    <li>item two</li>
    <li>item three
        <ul>
            <li>child item</li>
        </ul>
    </li
</ul>

我希望能够添加背景图片，即仅添加到“项目三”。最简单的方法是什么？

【参考方案1】：

我会使用 jQuery 循环遍历 UL 并找到具有 UL 子级的 LI 元素。可能是这样？：

<style type="text/css">
    .newClass 
        background: #059;
    
</style>

<script>

$(document).ready(function() 
    $('#mainUL li').each(function(i) 
        if ($(this).children('ul').length > 0) 
            $(this).addClass('newClass');
        
    );
);

</script>

<ul id="mainUL">
    <li>item one</li>
    <li>item two</li>
    <li>item three
        <ul>
            <li>child item</li>
        </ul>
    </li>
</ul>

【讨论】：

简单，就像我喜欢的一样。谢谢，@iDsteven。