4

異なるベンダーの 2 つの CSS ファイルをマージしようとしています。最初のものは定義します

body.mine div {border:1px solid red}

2つ目

.blue-border {border:1px solid blue}

生成された HTML には、

<div class="blue-border">hello</div>

これは青ではなく赤に見えます。HTML も最初の CSS コードも変更できません。私の唯一の「希望」は、2 番目の CSS を変更することです。ヒントはありますか？どうもありがとうございました！

例：

<html>
 <head>
   <style>
     body.mine div {border:1px solid red}
     .blue-border {border:1px solid blue}
   </style>
 </head>
 <body class="mine">
   <div>hallo</div>
   <div class="blue-border">hello</div> <- looks red, not blue as I want
 </body>
</html>
4

4 に答える 4

12

セレクターをより具体的にするだけです。

body.mine div.blue-border {border:1px solid blue}

これは、ブラウザにもっと具体的な要素を探すように指示します。私のクラスを持つbody要素の子であるblue-borderのクラスを持つdivです。

あなたは「青い境界線のクラスを持つものをすべて選択してください」と言っただけで、これは以前のセレクターよりもはるかに具体的ではありませんでした。

http://jsfiddle.net/Kyle_Sevenoaks/tcWK5/

于 2012-11-26T10:41:29.787 に答える
4

divよりも具体的なセレクターが必要なだけなので、具体性body.mineの低いセレクターをオーバーライドします。次のようなものを試してください：

body.mine div.blue-border {border:1px solid blue}
于 2012-11-26T10:41:23.247 に答える
2

これは、 の完璧な使用例になる可能性もあります!important。

.blue-border {border:1px solid blue !important}

の使用!importantはしばしば嫌われていることを認識していますが、.blue-border明らかに 1 つのことだけを行うユーティリティ クラスです。つまり、意図した結果が赤い境界線である場合は、このクラスを使用すべきではありません。

この場合!important、過剰修飾されたセレクターはパフォーマンスに大きな影響を与える可能性があるため、過剰修飾されたセレクターを使用するよりも優先します。

于 2017-01-13T14:13:42.933 に答える
0

css を使用してすべての要素のプロパティを変更したい場合は、特定の要素でこのプロパティを定義しないでください。

html body div#very .specific { 
  /*  Any prop that is NOT the ones you want to apply generally  */ 

   margin: ...
   font-weight: ...

  /* NOT color, nor background, etc */
}


/* These now will catch in the above too */
.blue{ 
   color: blue;     
}
.back-yellow{   
   background: #ff0;
}

説明: 色と背景は、より具体的な色/背景の定義を持たないすべての要素に適用されます。

したがって、一般的なルールをオーバーライドする場合は、特定の CSS パスでのみ色を定義してください。

于 2017-01-13T13:33:19.373 に答える