为什么我的<ul>继承自我的<div>？</div> </ul>

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

list-style-type CSS property是inherited property，因此您的ul 会将风格应用于它。然而，还有一些其他的东西，你可能不知道它会覆盖它。

所有浏览器都将默认（或“用户代理”）样式应用于元素，以便某些类型的基本样式适用于任何页面，即使没有定义的CSS（这就是CSS Resets很受欢迎的原因 - - 他们摆脱了默认风格）。这里发生的是浏览器的默认样式覆盖了继承的样式，因为默认样式专门针对ul，这使得默认样式比继承的样式更高specificity。

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

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

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

Answer 3

您需要专门针对该属性定位ul或li。

#navbar ul{
    list-style: none;
}

Answer 4

虽然您可以在每个HTML元素上设置任何CSS属性，但并非所有属性都对每个元素都有影响。

来自w3c的

list-style-type定义说：“适用于：display: list-item的元素。 Div标签默认没有display: list-item，所以没有意义在它上面使用它。此外，并非每个CSS属性都继承到子元素。 而是直接将它用于无序列表。