为什么我的<ul>不是从我的<div>继承？

Question

我已经研究了一段时间,所以我可能只是真的很累,但为什么不是我的div继承我的div(特别是list-style-type).这是我的HTML:

<div id="navbar">
    <ul>
        <li><a href="#">Reviews</a></li>
        <li><a href="#">Opinions</a></li>
        <li><a href="#">About</a></li>
    </ul>
</div>

这是CSS:

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

Answer 1

试试这个,

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

Answer 2

CSSlist-style-type属性是继承的属性，因此您ul 将应用到它的样式。然而，还有一些您可能没有意识到的其他因素正在影响它。

所有浏览器都将默认（或“用户代理”）样式应用于元素，以便任何页面都有某种基本样式，即使没有定义 CSS（这就是 CSS 重置流行的原因 - 它们摆脱了默认样式）。这里发生的情况是浏览器的默认样式覆盖了继承的样式，因为默认样式专门针对，这使得默认样式比继承的样式ul具有更高的特异性。

如果您使用浏览器开发工具（我使用 Chrome 31）检查列表（这里有一个小提琴），您会看到我上面解释的内容。我还在下面提供了一个屏幕截图。

解决方案？直接针对您的ul. 即使选择器只是，它也会在默认用户代理样式之后ul应用，因此将覆盖它们（因为现在它们具有相同的特异性，最后应用的规则获胜）。

#navbar ul { /* or in this case, just `ul` would work */
    list-style-type: none;
}