2

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

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

例如，

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

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

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

4

5 回答 5

5

是的，这是预期的行为，也是CSS级联的一部分。您只是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同一规则中的声明（但它会在单独的规则中尊重它们）。但由于这是一个古老的浏览器，老实说，没有太多的担忧。这条基本规则已经定义明确并且15 年多没有改变，所以浏览器有足够的时间来正确地实现它，并且没有任何借口捏造它，包括 IE。

于 2012-10-29T07:08:30.787 回答
3

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

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

在您的示例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！” 将呈现为绿色。不过，这对于速记属性变得更加棘手！

于 2012-10-29T07:10:50.387 回答
2

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

因此，例如，如果您正在使用这个

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

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

于 2012-10-29T07:08:44.760 回答
1

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

于 2012-10-29T07:09:01.643 回答
1

是的，如果你改变你写的行的顺序，后面写的总是会覆盖前一个，你的结果将被恢复，第二行总是领先第一行，所以如果你有两个或更多的 css 文件，那么你应该不要在 diff css 中的同一元素上应用 sme 样式，否则你会得到一些奇怪的 css 输出，这取决于包含的 css 文件的顺序。

于 2012-10-29T11:24:17.947 回答