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

Question

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

直觉上,我一直认为规则的属性是由浏览器按顺序运行的.

例如,

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

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

但是我可以认为这在所有浏览器中总是如此(IE,我在看着你)？

Answer 1

是的,这是预期的行为,也是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.