1

カラーブロックを定義しています...

.custom1 {
    background: red;
}
.custom1 h3 {
    color: white;
}
.custom2 {
    background: blue;
}
.custom2 h3 {
    color: #0f0;
}
.custom3 {
    background: #000;
}
.custom3 h3 {
    color: #f0f;
}

簡単に

私の問題は、ブロックが互いに入れ子になっているときに発生します。

H3 の最上位の親ラッパー宣言は、H3 の子ラッパー宣言をオーバーライドします (これは私には正しくないようです)。

ここに私の問題の小さなフィドルがあります

http://jsfiddle.net/ujrLf/

大なり記号 ">" を追加すると問題は解決しますが、最初のレベルのみです。

子要素の宣言で親をオーバーライドするにはどうすればよいですか?

4

4 に答える 4

2

試してくれたすべての人に感謝します。ここに私が行っている解決策があります...

ここにフィドルがあります！http://jsfiddle.net/4wAtz/1/

.custom1 {
    background: red;
}
.custom1 h3, 
[class*='custom'] .custom1 h3,
[class*='custom'] [class*='custom'] .custom1 h3,
.and-so-on, .and-so-on, .and-you-get-it
{
    color: white;
}
.custom2 {
    background: blue;
}
.custom2 h3, 
[class*='custom'] .custom2 h3,
[class*='custom'] [class*='custom'] .custom2 h3
{
    color: #0f0;
}
.custom3 {
    background: #000;
}
.custom3 h3, 
[class*='custom'] .custom3 h3,
[class*='custom'] [class*='custom'] .custom3 h3
{
    color: #f0f;
}

私が望むほどエレガントではありませんが、うまくいきます！発生していることがわかるレベル (プラス 1) の数だけ外挿する必要があります。

于 2013-06-27T19:54:53.393 に答える
0

同じレベルの特異性を持つスタイルがある場合、それらは読み込まれた順序で使用されます。そのため、「.custom3」ラッパーがある場合、それはスタイルのリストで最後に読み込まれたものであるため、「.custom3 h3」 color は、「.custom1 h3」および「.custom2 h3」の色よりも優先されます。

より具体的に取得できるほど、それらのスタイルの優先度が高くなります。たとえば、「.custom3 h3」は「h3」よりも優先度が高くなります。そして、「#content .custom3 h3」はさらに優先度が高くなります。

于 2013-06-27T19:30:07.720 に答える
0

> を使用すると、さらに下のレベルでも同様に修正されたようです。このフィドルを参照してください

.custom1 > h3 {
    color: white;
}
.custom2 > h3 {
    color: #0f0;
}
.custom3 > h3 {
    color: #f0f;
}

また!important、他のすべての CSS コマンドをオーバーライドしたい行でUSE HESITANTLY, SEE COMMENTS FOR WHYを使用するか、具体性をさらに高めることができます

于 2013-06-27T19:11:34.073 に答える