html – CSS当有宽度时,为什么左边的规则优先于正确的规则？

我有这个CSS代码：

#div1{
 height:200px;
 width:200px;
 background-color:red;
 position:absolute;
 right:30px !important; 
 left:0px;
 }

我想问为什么离开：0px;覆盖权：30px！重要而不是相反.或者使用！mportant的那个应该覆盖另一个,这对我来说听起来更合乎逻辑.

正如PaulD.Waite指出的那样,左边和宽度规则更多地覆盖了正确的规则.

所以真正的问题是

当有宽度时,为什么左边优先于右边？

FIDDLE

解决方法

只是为了表明浏览器符合w3c标准：

If the values are over-constrained,ignore the value for ‘left’ (in case the ‘direction’ property of the containing block is ‘rtl’) or ‘right’ (in case ‘direction’ is ‘ltr’) and solve for that value.

所以,如果我们从右到左设置方向

body  {
    direction: rtl;
}

#div1{
    height:200px;
    width:200px;
    background-color:red;
    position:absolute;
    right:30px; 
    left:0px;
}

现在左边被忽略了：

fiddle