冲突属性中的优先级

Question

直接或通过css指定冲突属性时如何确定优先级？

在此示例中，通过css指定的display : none似乎覆盖了直接为display : inline-block指定的id=1，因此该元素变为可见。

<style>
.invisible{
    display : none
}​​
</style>
<div id=1 class="invisible" style="display:inline-block">Hello World</div>

在以下示例中，我有两个冲突的类规范，

<style>
.invisible{
    display : none
}​​
.visible{
    display : inline-block
}​​
</style>
<div id=1 class="visible invisible">Hello World</div>

通过display : inline-block类指定的.visible似乎覆盖了通过display : none类指定的.invisible。

在这些情况下，决定优先级的规则是什么？

Answer 1

好的，对于CSS规则， specificity 的概念决定了哪些规则优先（这对于指定同名属性的情况很重要。）如果规则指定相同的CSS属性具有相同的特异性，样式表中指定的最新规则将属性值贡献给计算的样式。

Answer 2

要回答您的问题，在示例一中，您的代码是错误的...它不是display =“inline-block”..它是

<div id=1 class="invisible" style="display: inline-block;">Hello World</div>

内联样式始终优先于样式表。但由于写得不正确，样式表接管了。

在示例二中，显示块获胜，因为它在display：none之后声明。浏览器从上到下读取代码，因此您为属性声明的最后一个值获胜（除非您使用！important标记）。再次，内联样式总是赢。有更多优先级规则，但这就是您的示例所需的全部内容。