CSS：元素风格中哪个属性首先有什么区别？

Question

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

element{  
 property1: val1;  
 property2: val2;  
}  

和此：

element{  
 property2: val2;  
 property1: val1;  
}  

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

Answer 1

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

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

第二个属性取消第一个属性

Answer 2

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

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

属性不同，因此没有区别。这两个属性都已应用。

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

width属性正在应用两次。最后一个width:200px将覆盖width:100px，因此将被应用。在此示例中，width将为200px，padding将为20px。

See MSN了解CSS的基础知识。

Answer 3

如果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选择器以相同的选择器特异性来定位同一元素的相同属性时，最后一个会覆盖任何先前的声明。

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

有关详细信息，请查看此great article breaking down CSS specificity rules。听起来你需要更好地掌握级联的工作方式！

Answer 4

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