2

.menu内に があり、のような css セレクターを介して の子#headerにアクセスすると、代わりに が使用される場合があります。.menu.menu a#header a

要素に近いため、 が.menu aをオーバーライドすることを期待していました。なぜこれが起こらないのですか？以下の例に基づいて、IDと比較してクラスであると仮定しています。#header aa

この例では、親スタイルを制限せずに#red spancss をオーバーライドする良い方法はありますか?.blue span

「良い方法」とは、柔軟な意味だと思います。たとえば.blue、多くの場所で使用される php フレームワークによって作成された要素である可能性があります (おそらく id スタイルの親要素内ではないか、別の ID でスタイル設定された親要素内である可能性があります)。

ここに例があります。以外#greenはすべて赤のままです。

HTML:

<div id="red">
    <span>red</span>
    <div class="blue">
        <span>blue(class) - should be blue</span>
    </div>
    <div id="green">
        <span>green(id) - should be green</span>
    </div>
    <div class="green">
        <span>green(class) - should be green</span>
    </div>
    <div>
        <span>no child div style - should still be red</span>
    </div>
</div>

CSS:

#red span {
    color: red;
}
.blue span {
    color: blue;
}
.green, #green span {
    color: green;
}
4

4 に答える 4

2

CSS ルール ( なし!important) を適用する優先度は次のとおりです。

  1. セレクター内の ID の数。描くなら、
  2. 属性とクラスの数。描くなら、
  3. 名前または疑似要素。描くなら、
  4. CSS ファイルの最後の宣言。もちろん、これは決して描きません。

#red spanIDを.green持っていて、持っていないので、適用#red spanされます。

どの CSS ルールが最初に適用されるかについての詳細な説明については、スマッシング マガジンに関するこの素敵な記事を確認してください。

回避するには、より具体的なルールを使用できます。この方法では 1 位で同点になりますが、余分なクラスがあるため、2 位でルールが勝ちます。

于 2013-10-07T00:13:23.153 に答える
1

最もシンプルでクリーン：

http://jsfiddle.net/f4ke2/7/

#red {
    color: red;
}
.blue span {
    color: blue;
}
.green, #green span {
    color: green;
}

または、これを行うとどうなりますか? :)

#red > span {
    color: red;
}

また

 #red .blue span {color: blue;}

また

.blue span {
    color: blue !important;
}

または「柔軟性」の場合

#red .blue span, .blue span, #someotherID .blue span {color: blue;}

またはこれと同じくらい恐ろしいもの

var id = $("#red");
id.addClass(id.attr("id")).removeAttr("id");
于 2013-10-07T00:22:57.980 に答える
1

セレクターの特異性により、id がクラスよりも優先されます。青のクラスはカスケードで赤の後にありますが、特異性のために赤が優先されます。#red .blue span必要に応じてセレクターを使用できます

于 2013-10-07T00:10:30.080 に答える
0

クラスごとに要素にプロパティを割り当てるスタイル シート (フレームワークまたはその他) を使用している場合、つまりクラス セレクターを使用している場合は、他の CSS ルールを記述するときにこれを考慮する必要があります。したがって、これは規律あるコーディング (HTML および CSS) の問題であり、何らかのトリックを使用して通常の CSS 原則を排除することではありません。

基本的に、対象範囲が広すぎるセレクターを使用せずに、影響を与えたい要素にのみプロパティを設定します。たとえば、ある要素内のテキストを赤に設定color: redしたい場合、それらの設定をオーバーライドしたい場合を除き、その要素のみに設定し、その子孫には設定しません。

たとえば、 を含むスタイル シートがある場合、CSS カスケードに従って、別のルールでオーバーライドされない限り、.foo { color: blue }これは class 内のすべての要素に影響します。fooしたがって、 のような状況でオーバーライドされたくない場合は、より具体的なセレクターによってルールをオーバーライドするため、 を<div id=xxx>...<span class=foo>...</span>...</div>設定することはできません。(カラー セットを持つ) は親のカラーを継承しないため、この意味での#xxx span { color: red }使用#xxx { color: red }は安全です。span

!importantas inを使用.foo { color: blue !important }すると問題が解決するように見えますが!important、スタイル シートの管理と維持が難しくなります。また、特定性の効果をオーバーライドするためのツールが必要であるが、すでに武器を発射しているため、それができない場合にも問題が発生します。このルール.foo { color: blue !important }は に対して有効ではありません#xxx span { color: red !important }。

于 2013-10-07T05:23:38.217 に答える