CSS：同樣的規則，屬性總是按順序運行？

有大量的問題和答案規則優先。這裏的問題是關於瀏覽器在規則內執行CSS屬性。CSS：同樣的規則，屬性總是按順序運行？

直覺上，我一直認爲規則的屬性按瀏覽器順序運行。

例如，

#somediv { 
    margin:0; 
    margin-bottom:10px; 
    }

呈現在我使用的瀏覽器margin:0 0 10px 0;（永不margin:0;）（新版Chrome，FF和Safari，基本上）。意思是第二個屬性margin-bottom覆蓋之前的margin屬性（將所有邊距設置爲0）。

但我認爲這是總是真實的，所有瀏覽器（IE，我看着你）？

來源

2012-10-29 Ring Ø

可能的重複[是否有特定的CSS屬性順序？]（http://stackoverflow.com/questions/13078431/is-there-a-specific-order-for-css-properties） –

重複？我不同意這個問題明確堅持瀏覽器行爲：是否有任何瀏覽器不遵循最後一條規則？ –

既然你已經接受了答案，那麼只是添加一個評論，你對你的預感是正確的：在一些罕見的情況下，IE曾經是不可靠的。 – Knu

是的，這是預期的行爲，並且是CSS中的cascade的一部分。您只需簡單重寫margin簡寫的一個組成部分，並使用個人margin-bottom值。

請注意，它確實是而不是完全刪除整個margin速記聲明！請記住，你有上面的速記可以重寫爲這樣：

margin: 0 0 0 0;

或者這樣：

margin-top: 0; 
margin-right: 0; 
margin-bottom: 0; 
margin-left: 0;

所以margin-bottom: 10px只會覆蓋margin-bottom以上。

還要注意，IE6和更舊的版本不會在同一規則中給出!important聲明的優先級（但它會在單獨的規則中聲明它們）。但既然這是一個古老的瀏覽器，那麼說實話就沒什麼問題了。這個基本規則已經定義好了，並且沒有變化，所以瀏覽器已經有足夠的時間來正確地實現它，並且沒有任何理由去欺騙它，包括IE在內。

來源

2012-10-29 07:08:30 BoltClock

對於這組特定的規則，這是最正確的答案 - 首先，margin-bottom將覆蓋邊距（簡寫），而且最後的規則會覆蓋先前的規則，除非您的選擇器比前一個更具體。 – Jayx

@Jayx看來是如此。我更關心的是一些（舊的）瀏覽器不遵循該規則...... –

@ ring0不需要擔心，這一直是CSS規則的預期行爲。 – Jayx

是，如果你聲明瞭兩個相同的屬性，但不同的值，瀏覽器將拿起的最後聲明價值的財產

因此，舉例來說，如果你正在使用這個

div { 
    background-color: #ff0000; /*Red*/ 
    background-color: #00ff00; /*Green*/ 
}

瀏覽器會挑綠色，因爲它宣佈的最後

來源

2012-10-29 07:08:44

是的CSS屬性被覆蓋的順序，他們加載在所有瀏覽器

來源

2012-10-29 07:09:01

是的，這是根據w3c specification的正確行爲：

如果兩個聲明具有相同的權重......後者指定贏得

在您的示例margin-bottom將被設置爲10px。渲染引擎實際上並不關心同一特徵屬性值來自哪裏（它們可能已經在您的示例中設置在相同規則內部，或者在具有相同選擇器或不同選擇器的兩條規則內部）。如果兩個聲明具有相同的計算權重，則後者獲勝：

<style> 
    .container span {color:red;} 
    .content span {color:blue;} 
    div .inner {color:green;} 
    p a {color:orange;}  
</style> 
<div class="container"> 
    <p class="content"> 
    <a href="#" class="button"><span class="inner">Hello world!</span></a> 
    </p> 
<div>

文本將呈現什麼顏色？前三條規則具有相同的特徵，所以「Hello world！」將呈綠色。雖然這對速記屬性來說很棘手！

來源

2012-10-29 07:10:50

是的，如果你改變了寫的行的順序，總是會覆蓋前面的那個，你的rerult將被恢復，第二行總是會引導第一行，所以如果你有兩個或更多css提交然後你不應該在差異CSS中的相同元素應用sme風格，否則你會得到一些奇怪的css輸出，這取決於包含的css文件的順序。

來源

2012-10-29 11:24:17

CSS：同樣的規則，屬性總是按順序運行？

回答

相關問題