私は祖先 (特に親ではない) に従っていくつかのボタンのテーマを設定しようとしているので、... 次の HTML 構造があります。
<body class="theme-a">
<section class="container">
<form class="theme-b">
<div class="button-group">
<button type="button">Button B1</button>
<button type="button">Button B2</button>
</div>
<div class="button-group">
<button type="button">Button B3</button>
<button type="button">Button B4</button>
</div>
</form>
<form>
<div class="button-group">
<button type="button">Button A1</button>
<button type="button">Button A2</button>
</div>
<div class="button-group">
<button type="button">Button A3</button>
<button type="button">Button A4</button>
</div>
</form>
</section>
</body>
ご覧のとおり、テーマは 2 つ.theme-a
あり、.theme-b
CSS コードは次のようになります。
.theme-a {
background: #999;
}
.theme-b {
background: #555;
}
.theme-a button {
background: #222;
}
.theme-b button {
background: #69C;
}
問題は、テーマ クラス (A と B、B と A) を切り替えると、A テーマのボタン (テーマ クラスに近い祖先を持ち、遠い祖先のスタイルを維持することに気付くでしょう)。黒ではなく青の背景)。
ボタンのプロパティが最も近い祖先に従って設定されるように、適切な特異性を実現するにはどうすればよいですか?
JSfiddle からのリンクは次のとおりです: http://jsfiddle.net/XVaQT/1/
私は明確な方法で説明したことを願っています:)
ありがとう</p>