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：元素樣式中的屬性是否有區別？

回答

相關問題