CSSオーバーライド、最初にロードされたスタイルシート

Question

私は非常に奇妙な問題があります。私はCSSスタイルシートでは分かりません。私は2つのスタイルシートを持っています.1つはcdnから、1つは縮小され、次に私のローカルのdevサーバ上のindex.html（ローカル）に注入されます。だから、ちょうど上のそれ自身のハッシュとそのスタイルシートを置くことをgrunt-cssminとgrunt-injectorでイサキのタスクを使用している

<link rel="stylesheet" href="myCDNStyleSheet.css"> 
<!-- injector:css --> 
<link rel="stylesheet" href="css/localMinifiedStyles.css?1474574347809"> 
<!-- endinjector --> 

：だからクイックリファレンスのために、私のヘッダに私はこのような何かを持っています。

今奇妙な何がmyCDNStyleSheetが最初にロードされたにも関わらず、である、それからいくつかのスタイルはlocalMinifiedStylesのスタイルの上にprecentを取っている、とそう現在、私は「localMinifiedStyles」内のスタイルにいくつかの!importantを入れて持っていました、それは私には非常に奇妙です。

だから私は何を意味するか、スーパー明確にするためには、次のとおりです。

myCDNStyleSheet.cssがあります

.styleMe { 
     margin-left: 5px 
    } 

とlocalMinifiedStyles.cssがあります

.styleThis { 
    margin-left: 12px 
} 

など探してレンダリングされたHTML：

<div class="styleMe styleThis"> 

は12の代わりにmargin-left: 5pxを使用しています。私はその両方を検査官で見ることができます。

ロード順序を入れ替えても問題は解決されません。実際には、localMinifiedStylesのスタイルが優先されています。

chrome devtoolsのスタイルを調べても、私はlocalMinifiedStylesがprecentを取っているスタイルの下にあるのを見ます。私はこれの原因を理解することができません、私は気づいていない何かをしゃがんだ注射が可能ですか？これまでCSSを使って作業していた私の前提は、最後に読み込まれたスタイルシートが優先され、ここで何か不足していますか？

Answer 1

私は本当にあなたが記述行動を起こしたのかわからないんだけど - しかし、あなたの問題を解決する簡単な方法は、クラスを複製することで、（あなたは、CSSルールのまったく同じ「優先順位」を持っている場合は、後者が勝ちます）あなたのCSSの定義。あなたが使用できる上styleThisクラスを取りたい場合は、次の

.styleThis.styleThis { 
    margin-left: 12px; 
} 

それはハックのようなものだが、それは、クロム、Firefoxやつまりの最新のバージョンまでで動作します。

.green.green { 
 
    color: green; 
 
} 
 
.red { 
 
    color: red; 
 
}

<div class="red green"> 
 
    This text's color should have been red because the red rule is latter in the CSS, however it will be green due to the <code>.green.green</code> in the css rules. 
 
</div>