Question

我无法使其工作，我希望以下样式仅影响<ul>元素内不属于的div#canvas元素。我认为这会奏效，但事实并非如此。

:not(div#canvas) ul{
    list-style-type: none;
    padding: 0;
    margin: 0;
}

所以，例如，第一个列表不应该有子弹，而第二个和第三个列表（div中的那个）应该有子弹。

<ul>
    <li>Test</li>
    <li>Test</li>
    <li>Test</li>
</ul>
<div id="canvas">
    <ul>
        <li>Test</li>
        <li>Test</li>
        <li>Test</li>
    </ul>
    <div>
        <ul>
            <li>Test</li>
            <li>Test</li>
            <li>Test</li>
        </ul>
    </div>
</div>

Answer 1

/*parent*/body > ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

这将影响直接的孩子（所有未嵌套在其他div中的孩子）

http://jsfiddle.net/t3Xyc/1/

OR

您可以将自定义规则应用于您尝试设置样式的特定ul元素

ul {
 list-style-type: none;
 padding: 0;
 margin: 0;
}

div#canvas ul {
 /*Custom style Here*/
}

Answer 2

如果：not（）选择器支持所有可能的选择器作为其参数，则以下选择器应该有效：

:not(canvas ul){
    list-style-type: none;
    padding: 0;
    margin: 0;
}

但是，根据specification，传递给：not（）选择器的参数可能只是一个简单的选择器，然后指定here。因此，使用单个css选择器无法实现您想要完成的任务。以下是一个更冗长，但它会工作：

ul{
    list-style-type: none;
    padding: 0;
    margin: 0;
}

#canvas ul {
    list-style-type: disc;
    padding-left: 40px;
    margin: 16px 0;
}

Answer 3

这应该有效：

div:not(canvas) ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

影响元素不在div中

3 个答案: