css - 为什么我的 不是从我的 继承的？

Question

我已经为此工作了一段时间，所以我可能真的很累，但为什么我的 ul 没有从我的 div 继承属性(特别是列表样式类型)。这是我的 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

list-style-type CSS property是一个 inherited property ，因此您的 ul 正在获取应用于它的样式。然而，还有一些您可能没有意识到的其他因素正在影响它。

所有浏览器都将默认(或“用户代理”)样式应用到元素，因此任何页面都有一些基本样式，即使没有定义的 CSS(这就是 CSS 重置流行的原因 - - 他们摆脱了默认样式)。这里发生的是浏览器的默认样式覆盖了您继承的样式，因为默认样式专门针对 ul，这使默认样式具有更高的 specificity。比继承的样式。

如果您使用浏览器开发工具(我使用的是 Chrome 31)检查列表 ( here's a fiddle )，您会看到我上面解释的内容。我还在下方提供了截图。

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

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