0

チャットの連絡先のリストがあります。すべての連絡先は、クラスによって異なる状態を表すことができます。

  • 。オンライン
  • 。オフライン
  • .online .selected
  • .offline .selected

これらは関連するスタイルです（例）：

.online {
   background-color: #fff;
   p { color: #000; }
}

.selected {
   background-color: #000;
   p { color: #fff; }  // This doesn't take effect
}

スタイル的には、常に.selectedに適用されるスタイルを優先させたいのですが、残念ながら、.selectedクラスを追加すると、（トップレベルからの）背景色のみが変更されます。

私は何が欠けていますか？ありがとうございました！

4

2 に答える 2

0

コンパイルされると、順序が変更されるようなことが起こる可能性があります（そうではないはずですが）。まず最初に、あなたのLESSを表示するだけでなく、コンパイルされたCSSを表示できますか（Procssorはコンパイル後にきれいにするのに最適です）、これにより、ブラウザーが何を表示するかについてのより良いアイデアが得られるはずです。あなたの要素。

単純な解決策は、特に選択したものを常に支配的にしたいので、使用することです。!important

.online {
   background-color: #fff;
   p { color: #000; }
}

.selected {
   background-color: #000!important;
   p { color: #fff!important; }
}
于 2012-04-11T15:33:35.200 に答える
-2

CSSを使用して要素を変更する場合は<p>、CSSを次のように表示する必要があります。

.selected p {
    background-color: #0000;
    color: #fff;
}

同じことが.onlineクラスにも当てはまります

2つの異なる状態が必要な場合は、CSSを追加します。

.selected {
    // basic code
}

.selected p {
    // extended code to p element
}
于 2012-04-10T02:29:58.603 に答える