Question

我有这个CSS代码：

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

我想问为什么left:0px;会覆盖right:30px !important而不是相反。或者!mportant的那个应该覆盖另一个，这对我来说更合乎逻辑。

正如PaulD.Waite指出的那样，left和width规则覆盖了right规则。

所以真正的问题是

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

FIDDLE

Answer 1

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

如果值过度约束，则忽略'left'的值（如果包含块的'direction'属性为'rtl'）或'right'（如果'direction'为'ltr'）并解决这个价值。

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

body  {
    direction: rtl;
}

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

现在左边被忽略：

fiddle

Answer 2

right:30px !important

只能覆盖其他right规则。它对left规则无效。

只要您没有其他right规则，您的!important绝对没有效果。它只是用于增加规则的特异性，它不是引擎如何处理各种矛盾规则的暗示。一旦计算出要应用的规则，!important的角色就完成了。

Answer 3

做了更多研究后，以下内容将回答您的问题： http://www.w3.org/TR/css3-positioning/#abs-non-replaced-width

如果'left'，'width'和'right'都是'auto'：首先将'margin-left'和'margin-right'的'auto'值设置为'0'。然后，如果建立包含静态位置的块的元素的'direction'属性是'ltr'，则将'left'设置为静态位置并在下面应用规则3;否则，将“右”设置为静态位置并应用下面的规则编号。

如果这三个中没有一个是'auto'：如果'margin-left'和'margin-right'都是'auto'，那么在额外约束条件下求解两个边距得到相等值的等式，除非这样做它们为负数，在这种情况下，当包含块的方向为'ltr'（'rtl'）时，将'margin-left'（'margin-right'）设置为'0'并求解'margin-right'（'margin'） -剩下'）。如果'margin-left'或'margin-right'中的一个是'auto'，则求解该值的等式。如果值过度约束，则忽略'left'的值（如果包含块的'direction'属性为'rtl'）或'right'（如果'direction'为'ltr'）并求解那个价值。

否则，将'margin-left'和'margin-right'的'auto'值设置为'0'，并选择以下六个适用的规则之一。

如果'left'和'width'是'auto'而'right'不是'auto'，那么   宽度缩小到合适。然后解决'左'。

如果'left'和'right'是'auto'而'width'不是'auto'，那么如果'direction'属性   建立静态位置包含块的元素是   'ltr'将'left'设置为静态位置，否则将'right'设置为   静态位置。然后解决'左'（如果'方向是''rtl''）或   '正确'（如果'方向'是'ltr'）。

如果'width'和'right'是'auto'   并且'left'不是'auto'，然后宽度缩小到适合。然后解决   为'正确'。

如果'left'是'auto'，'width'和'right'不是'auto'，   然后解决'左'。

如果'width'为'auto'，'left'和'right'不是'auto'，则求解'width'。

如果'right'是'auto'，'left'和'width'不是'auto'，那么就解决'right'。

Answer 4

绝对位置规则：

right = -left
top = -bottom

Answer 5

编程/编码就是在逻辑上做事并让生活变得轻松。
为了以简单的方式回答你的问题，我会说 - 你可能会认为right:30px;应该覆盖left:0; deu到特异性和级联规则，对吧？但不是在这里，当你的两个属性相同时，就会发生级联。所以，如果你写：

width: 30px;
width: 50px !important;

width: 50px即将获得应用。

但在你的情况下，它是左派与右派。不一样的财产。因此，当CSS遇到这两个值时，它会逻辑思考并应用这些值。因为如果你想让元素只剩下30px的位置，你可以编写left: 30px;，如果你想让元素正确定位30px，你可以编写right: 30px;但不能同时写两个值案件。

我认为你明白我的观点并希望能帮助你清除困惑。：）

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

5 个答案: