CSS鏈接順序和違規

有時我遇到這個問題，其中來自更高一行CSS文件鏈接的CSS規則覆蓋CSS文件鏈接較低行的CSS規則。CSS鏈接順序和違規

讓我證實，這是加載文件的順序：我補充一個規則這樣

<link href="css/bootstrap.min.css" type="text/css" rel="stylesheet"> 
<link href="css/font-awesome.min.css" type="text/css" rel="stylesheet"> 
<link href="css/datepicker.css" type="text/css" rel="stylesheet"> 
<link href="css/fonts.css" type="text/css" rel="stylesheet"> 
<link href="css/bootstrapValidator.min.css" type="text/css" rel="stylesheet"> 
<link href="css/bootstrap-select.css" type="text/css" rel="stylesheet"> 
<link href="css/styles.css" type="text/css" rel="stylesheet"> 
<link href="css/media_queries.css" type="text/css" rel="stylesheet"> 
<link href="css/hover.min.css" type="text/css" rel="stylesheet"> 
<link href="css/print.css" type="text/css" rel="stylesheet" media="print">

在我styles.css文件：

dd { 
    margin-left: 0; 
}

當我檢查我的谷歌開發者控制檯我看到這個：

所以，我從這個唯一的結論是一般風格不要否決媒體查詢。這是真的？推翻這種引導式媒體查詢的最佳做法是什麼？通過編寫相同的查詢或使用!important？

感謝

來源

2016-02-22 odedta

CSS規則是基於「獨特性」應用。這包括諸如外觀順序，你的CSS選擇器的特定性等幾個標準。

我不會那麼快地跳到!important規則，因爲這意味着你還沒有明白爲什麼你的CSS不符合你想要的方式。關於css-tricks.com有一個很好的寫法，你會想要更好地理解這個主題。

在你的具體的例子，@media查詢是不是在這裏實際的罪魁禍首（儘管它似乎適用），這是一個事實，即.dl-horizontal dd規則更具體比一般dd規則，併爲此「贏」。如果沒有隨聲鏈接的文章解釋了，你的結論是

一般樣式不否決媒體查詢

不正確，視情況是，你有（至少）兩個CSS規則靶向您dd ，其中其中一個比另一個更具體，因此「贏」，而不管@media前綴。

來源

2016-02-22 08:41:55

我看到丹尼爾，非常感謝你的快速反應和參考。 – odedta

如果前提是你可以看到兩個CSS選擇器控制檯截圖：

.dl-horizontal dd {} 
dd {}

是.dl-horizontal dd覆蓋你的dd CSS究其原因，是因爲CSS工作特殊性的基礎上。 .dl-horizontal dd更具體，dd，因此是積極的風格。

使用!important不是答案，您只需要將您的CSS選擇器設置爲比.dl-horizontal dd更具體。任何例子都可以;

dl.dl-horizontal dd { margin-left: 0; }

來源

2016-02-22 08:44:13 itsphilz

我看到@itsphilz，非常感謝您的詳細回覆。 :) – odedta

CSS鏈接順序和違規

回答

相關問題