Question

规则优先有很多问题和答案。这里的问题是浏览器在相同规则中执行CSS属性。

直观地说，我一直认为规则的属性是由浏览器按顺序运行的。

例如，

  #somediv {
    margin:0;
    margin-bottom:10px;
  }

在我使用的浏览器中呈现为margin:0 0 10px 0;（而且从不margin:0;）（基本上是最近的Chrome，FF和Safari）。这意味着第二个属性margin-bottom会覆盖先前的margin属性（将所有边距设置为0）。

但我可以在所有浏览器（IE，我看着你）中认为这是始终是真的吗？

Answer 1

是的，这是预期的行为，也是CSS中cascade的一部分。您只是使用单个margin值覆盖margin-bottom简写的其中一个组件。

请注意，不完全删除整个margin速记声明！请记住，您上面的速记可以重写为：

margin: 0 0 0 0;

或者这个：

margin-top: 0;
margin-right: 0;
margin-bottom: 0;
margin-left: 0;

因此margin-bottom: 10px会覆盖上面的margin-bottom。

另请注意，IE6及更早版本不会优先考虑同一规则中的!important声明（但它会在不同的规则中遵守它们）。但是，由于这是一个古老的浏览器，说实话并不是很重要。这个基本规则定义明确且不变for more than 15 years，因此浏览器有足够的时间正确实现它，没有任何借口可以捏造它，包括IE。

Answer 2

是的，根据w3c specification，这是正确的行为：

如果两个声明具有相同的权重...后者指定胜利

在您的示例中，margin-bottom将设置为10px。

渲染引擎实际上并不关心相同特性的属性值来自何处（它们可能在您的示例中设置在相同规则内，或者在具有相同选择器或不同选择器的两个规则内）。如果两个声明具有相同的计算权重，则后者获胜：

<style>
  .container span {color:red;}
  .content span {color:blue;}
  div .inner {color:green;}
  p a {color:orange;}    
</style>
<div class="container">
  <p class="content">
    <a href="#" class="button"><span class="inner">Hello world!</span></a>
  </p>
<div>

文字呈现的颜色是什么？前三个规则具有相同的特异性，因此“Hello world！”将以绿色呈现。但是，使用速记属性会变得更加棘手！

Answer 3

是的，如果您声明两个相同的属性但价值不同于浏览器将获取该属性的最后声明的值

因此，例如，如果您使用此

div {
   background-color: #ff0000; /*Red*/
   background-color: #00ff00; /*Green*/
}

浏览器将选择绿色，因为它是最后声明的

Answer 4

是.. css属性按照在所有浏览器中加载的顺序被覆盖

Answer 5

是的，在写完之后总是覆盖前一个如果你改变你写的行的顺序，你的rerult将被还原，第二行将总是引导第一行，所以如果你有两个或更多的css归档，那么你不应该在diff的同一元素上应用sme样式css或者你将获得一些奇怪的css输出，这取决于所包含的css文件的顺序。

CSS：同样的规则，属性总是按顺序运行？

5 个答案: