Question

我想将一组css规则应用于我的#content div中的所有（One）列表，但不允许这些列表影响附加div中的（Two）列表。

<!DOCTYPE>
<html>
    <head>
        <style>
        #content *:not(div) ul {list-style:none;}
        </style>
    </head>
    <body>
        <div id="content">
            <ul>
                <li>One</li>
            </ul>
            <div>
                <ul>
                    <li>Two</li>
                </ul>
            </div>
        </div>
    </body>
</html>

Answer 1

对于这种特定情况，您可以使用

#content > ul {list-style:none;}

这将定位#content元素的直接孩子

Answer 2

您可能想要"child" or "descendent" selector，它只匹配选择器>右侧的那些元素，这些元素是与左侧匹配的元素的直接子元素。如果我理解你想要的话：

#content > ul { list-style: none; }

CSS嵌套：not（）选择器

2 个答案: