如何在列表中设置列表样式？

Question

我在列表中有一个列表，但我不希望内部列表接收外部列表的样式。这是我的代码：

CSS：

li {
    background-color:red;
}

#sections li {
    color:blue;
}

HTML：

<ol id="sections">
<li>Item 1</li>
<li>Item 2</li>
<li>
<ol><li>Item A</li>
<li>Item C</li>
</ol>
</ol>

我可以将color设置为我的默认值，但这是一种黑客攻击，将来如果我添加一些#sections li样式，它可能会混淆内部列表样式，所以我认为这是不好的编码形式。

如何使内部列表不受外部列表的影响？

Answer 1

可能希望为嵌套列表执行新样式，如下所示：

ol ol li,
ol ul li,
ul ol li,
ul ul li
{
    /* Nested list styles */
    background: #FFF;
    color: #000;
}

您还可以使用> child selector来定位顶级<li>：

ol#selections > li
{
    color: blue;
}

Answer 2

我相信你想要的是

ul li {color:blue}
ul li li {color:white;}

只需更改第二种颜色