CSS：元素样式中的属性是否有区别？

例如是有此之间的任何差：和CSS：元素样式中的属性是否有区别？

element{ 
property1: val1; 
property2: val2; 
}

此：

element{ 
property2: val2; 
property1: val1; 
}

？

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

来源

2013-10-03 David

唯一的区别是只有两个属性影响相同的元素，在这种情况下，顺序会很重要。 –

您应该稍微阅读一下：https：//developer.mozilla.org/en-US/docs/Web/CSS – j08691

宽度和填充不是相同的属性，所以它们的顺序是不相关的。 'div {width：200px; padding：20px; }'和'div {padding：20px;宽度：200px; }'在前端会产生相同的结果，除非使用非标准盒子模型'border-box'，这意味着将填充从宽度中减去而不是添加到它，因为它在默认的“内容盒”盒子模型中。 – Ennui

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

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

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

来源

2013-10-03 18:59:12

只在这种情况下？ – David

只有在被定义的属性相同的情况下，是的。最常见的是具有速记的属性（比如'margin'或'padding'或'background'或'border'等）。所以写'div {margin：20px; margin-bottom：10px; }'和'div {margin：20px 20px 10px}'意味着同样的事情。 – Ennui

从技术上讲，“margin-right”和“margin”属性不一样。后者是一种速记，将前者与其他一些属性一起使用。类似的考虑也适用于其他的shorthands，比如'font'或'background'。 –

如果属性相同，最后一个将覆盖第一个，并因此被应用。

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

属性是不同的，因此没有区别。这两个属性都适用。

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

该width属性正在申请两次。最后一个，width:200px将覆盖width:100px，并因此被应用。在这个例子中，width将是200px而padding将是20px。

See MSN了解CSS的基础知识。

来源

2013-10-03 18:58:43

-1

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

来源

2013-10-03 19:00:26 Todd

如果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了解更多信息。听起来你需要更好地掌握级联的工作方式！

来源

2013-10-03 19:01:53 Ennui

CSS：元素样式中的属性是否有区别？

回答

相关问题