css - CSS：元素样式中哪个属性首先有什么区别？

Question

例如，这之间有什么区别：

element{  
 property1: val1;  
 property2: val2;  
}

和这个：

element{  
 property2: val2;  
 property1: val1;  
}

?

更新我的意思是不同的属性，例如width和padding。

score 6 · Accepted Answer

如果两个属性都影响相同的属性，那么是的。如果你 ..

.example {
   margin-right: 12px;
   margin: 5px auto;
}

第二个属性抵消了第一个属性

score 3 · Accepted Answer

如果属性相同，则最后一个将覆盖第一个，从而被应用。

#div1 {
    width:100px;
    padding:20px;
}

属性不同，所以没有区别。两个属性都被应用。

#div2 {
    width:100px;
    width:200px;
    padding:20px;
}

该width属性被应用了两次。最后一个，width:200px将覆盖width:100px，因此被应用。在这个例子中widthwill be200px和 the paddingwill be 20px。

score 1 · Accepted Answer

如果property1和property2影响相同的属性，则后者将覆盖前者。例如：

div {
    background-image: url(images/test.png);
    background: transparent url(images/test2.png) no-repeat left top;
}

将使用后一个background速记图像test2.png，而不是test.png来自第一个声明。这是因为当两个 CSS 选择器以相同的选择器特异性针对同一元素的相同属性时，最后一个选择器会覆盖任何先前的声明。

但是，如果两个声明不是针对同一个属性，则顺序无关紧要。

查看这篇分解 CSS 特异性规则的精彩文章以获取更多信息。听起来您需要更好地掌握级联的工作原理！

score -1 · Accepted Answer

我听说过坚持认为 CSS 属性应该按字母顺序列出的说法。所以就是这样，如果你想要“漂亮”的代码。否则，没有区别。

4 回答 4