4

私は祖先 (特に親ではない) に従っていくつかのボタンのテーマを設定しようとしているので、... 次の 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>

4

1 に答える 1

1

ありがたいことに、CSS を使用すると、複数のセレクターを組み合わせて多くの要素に同じスタイルを指定できます。jsfiddle を実際の例で更新しました。質問で述べたように、クラスtheme-aと を変更するだけで、動作を確認できます: http:// jsfiddle.net/cchana/XVaQT/3/theme-b

button私が行ったのは、クラスを持つ要素の子孫であるを探していた場所に2番目のセレクターを追加することだけですtheme-a:

.theme-a button {
    background: #222;
}

また、それ自体がclass をbutton持つ要素の子孫である class を持つ要素の子孫であるa も検索します。theme-btheme-a

.theme-a button,
.theme-a .theme-b button {
    background: #222;
}

このセレクターがより具体的であるため、定義されたスタイルをオーバーライドする!importantため、値に a を追加する必要はありません。background.theme-b button

于 2012-11-15T15:57:02.827 に答える