CSS的執行順序

我很想知道CSS文件中語句的執行順序。我在CSS文件中的以下CSS：CSS的執行順序

/* screen width larger than 800px */ 
@media screen (min-width: 800px) { 
    .indexphototd { 
      width:200px !important; 
     } 
    .indexphoto { 
     width:200px !important; 
     } 
} 

/* screen width larger than 1200px */ 
@media screen (min-width: 1200px) { 
    .indexphototd { 
      width:300px !important; 
     } 
    .indexphoto { 
     width:300px !important; 
     } 
} 


/* default setting */ 
.indexphototd { 
    width:500px !important; 
    } 
.indexphoto { 
    width:500px !important; 
    }

在上面我已經宣佈2種2班的設置，在2種不同屏幕尺寸的代碼，並在那之後我已經提到2條語句，而不在限制屏幕尺寸（即默認）。

我的目標是，屏幕尺寸不屬於上述2組，它必須採用下面第3組中設置的默認值。

但我想知道默認設置是否會覆蓋特定於屏幕尺寸的設置，因爲我在最後插入了默認設置。我必須在一開始就把它放在一邊嗎？您能否讓我知道CSS中的執行順序。我知道CSS不是一種編程語言。我對網絡開發和學習所有這些微小的東西很陌生。請幫幫我。謝謝。

艾薩克

來源

2013-05-14 Isaac

爲什麼你不測試它？ –

後面的語句會覆蓋前面的語句，所以您必須進行具體的說明。

/* General CSS here */ 

/* CSS for min-width 800 here, overides general */ 

/* CSS for min-width 1024 here, overides both general and 800 */

來源

2013-05-14 21:50:59 dtech

您的默認值必須在媒體查詢之前聲明。

CSS按順序「執行」。您希望媒體查詢覆蓋特定實例中的默認值，因此您必須在之後聲明它們。

來源

2013-05-14 21:50:49 Turnip

非常感謝。非常感謝。 – Isaac

CSS被從頂部到底部被解析，所以，如果兩個選擇器相等specificity的和匹配相同的元件，在樣式表中，後者將獲勝。

來源

2013-05-14 21:51:10 Adrift

提及特異性的+1 – Senjai

如果兩個或多個選擇器匹配樣式表中後者將應用的元素，那麼您是不是指意思？例如'p.blue {color：blue; } p {color：red; }''p'和'p.blue'是不同的選擇器，但都適用於'

'，最後一個將覆蓋第一個。 – dtech

@dtech實際上在你的例子中，最後一個不會覆蓋第一個，因爲第一個對目標元素更特定。在此處查看http://jsfiddle.net/GY69b/ – Arbel

CSS的執行順序

回答

相關問題