1

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

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为我的默认值，但这有点像 hack，将来如果我在样式中添加一些东西，#sections li它可能会与内部列表样式混淆，所以我认为这是一种糟糕的编码形式。

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

4

2 回答 2

4

可能想要为嵌套列表做一个新的样式，像这样：

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

您还可以使用>子选择器仅针对顶级<li>s：

ol#selections > li
{
    color: blue;
}
于 2012-09-13T01:56:57.337 回答
0

我相信你想要的是

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

只需更改第二种颜色

于 2012-09-13T01:56:34.017 回答