html - 影响不在 div 中的元素

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 中的 uls）

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

或者

您可以只对您尝试设置样式的特定 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;
}

但是，根据规范，传递给 :not() 选择器的参数可能只是一个简单的选择器，然后在此处指定。因此，您尝试使用单个 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;
}