0

CSS の継承が期待どおりに機能しない理由を突き止めようとして、壁にぶつかりました。

問題を説明するには... さまざまな背景色を定義する再利用可能な CSS があり、ユーザー構成ごとにページのさまざまなセクションの背景と前景を切り替えます。問題は、親 DIV に割り当てられ、CSS でさらに下に定義されている色の 1 つが、子 DIV で定義された CSS 属性をオーバーライドすることです。適切な例は、この JSBin の例です - JSBin link ! では、bgBlack は CSS ファイルで bgWhite の後に定義されているため、ユーザー エージェントは bgWhite DIV! のコンテンツに対しても bgBlack のプロパティを使用しています。これを機能させる必要があります。そうしないと、ユーザーが開発者を介さずに色などを切り替えることができるという点で深刻な問題が発生します。どんな助けと指導も大歓迎です！

<!DOCTYPE html>
<html>
<head>
   <meta name="description" content="[add your bin description]" />
   <meta charset=utf-8 />
   <title>JS Bin</title>
</head>
<body class="bgDark">

  <div class="bgWhite" style="margin:100px;padding:20px;height:200px;width:200px;">
  <h1>Hello World!</h1>
  <ul>
  <li><a href="#">This is a link 1</a></li>
  <li><a href="#">This is a link 2</a></li>
  <li><a href="#">This is a link 3</a></li>
  </ul>
  </div>

</body>
</html>

そしてこれのCSSは....

.bgWhite { background-color:white;color:black; }
.bgWhite a { color:black; }
.bgWhite a:hover { color:red; }

.bgDark { background-color:black;color:white; }
.bgDark a { color:white; }
.bgDark a:hover { color:blue; }
4

5 に答える 5

2

スタイルの両方のセットが同一の特異性を共有しているため、最後に記述されたスタイルが一致する要素に対して優先されます。

于 2012-10-12T15:26:50.503 に答える
1

You can re-overwrite the properties with a more specific selector. 

body .bgWhite, .bgWhite { background-color:white;color:black; }
body .bgWhite a, .bgWhite a { color:black; }
body .bgWhite a:hover, .bgWhite a:hover { color:red; }

body .bgDark, .bgDark { background-color:black;color:white; }
body .bgDark a, .bgDark a { color:white; }
body .bgDark a:hover, .bgDark a:hover { color:blue; }

Demo

于 2012-10-12T15:28:06.187 に答える
1

より具体的なセレクターを使用してください。たとえば、「div」を bgWhite ルールに追加すると、それらが使用されます。

http://jsfiddle.net/8QfAa/

ここで特異性について読んでください：http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/

于 2012-10-12T15:31:12.813 に答える
0

This is not a problem of inheritance, it's a problem about priorities.

both element are defined as .class element, so they are equally important. In such case, the CSS that will be used is the last one to be defined.

An easy way to add priority to one definition is to add something common in front.

Examples : 

html .bgWhite a { color:black; } 
html body .bgWhite a { color:black; } 
div.bgWhite a { color:black; } 
div.bgWhite a { color:black !important; } <- avoid if possible.
于 2012-10-12T15:30:42.263 に答える
0

何時間もいじり回した後、@GionaF によって提供されたポインターに基づいて、肥大化した CSS ファイルや JavaScript を使用して操作する必要のない、有意義な解決策を見つけるための探求に着手しました。

私はそれを釘付けにしたと思います！ここにソリューションを投稿して、他の誰かが私たちのように完全に動的なエクスペリエンスを作成しようとしていて、ソリューションを探している場合に、この知識がコミュニティで利用できるようにします.

この JSFiddle DEMO をチェックして、この問題をどのように解決したかを確認してください。全体として、ここに質問を投稿する前に調査/調査に約 40 時間かかり、ここに質問を投稿してからさらに 5 時間ほど費やしたと思います。45 時間節約でき、しかもエレガントなソリューションを実現できます。これが誰かに役立つことを願っています。幸運を！

于 2012-10-12T21:15:49.040 に答える