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;
}

这将影响直接的 child (所有没有嵌套在其他 div 中的 uls)

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

或

您可以只对您要设置样式的特定 ul 元素应用自定义规则

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

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