4

この例では：

http://jsfiddle.net/Ja29K/

<style>
  /* Default links */
  a {
    color: #0F0; /* Green */
  }

  /* Header links */
  #header a {
    color: #F00; /* Red */
  }

  /* Login link */
  #login {
    color: #00F; /* Blue */
  }
</style>

<header id="header">
  <p><a href="#">header link</a> is red</p>
  <p><a id="login" href="#">login link</a> is not blue</p>
</header>

ログインリンクを青色にする必要があるのは論理的ではありませんか？

私は、宣言が同じ起源と同じ重要性を持っていることを知っているので、それらをスコアリングする必要があります（セレクターの特異性）。

セレクターの特異性を計算するために、セレクターごとにテーブルを作成しました。

A =インラインスタイルの数：0
B = IDの数：0
C =クラスの数：0
D =要素の数：0

したがって、ログイン要素には、彼の色に関連する3つの衝突があります：a、 ＃header a、＃login

要素（A、B、C、D）

a（0、0、0、1）= 1
#header a（0、1、0、1）= 101
#login（0、1、0、0）= 100

セレクター「#headera」が最大のスコアだったので勝ちました。

だが

セレクター「#login」を「a＃login」に変更すると、次のようになります。a
＃login（0、1、0、1）= 101
引き分けで最後に勝つため、セレクター「#headera」が失われます。それが宣言されました。

だから、私が理解できないことは：

「#headera」セレクターは多くの要素を参照し、IDセレクター（たとえば#login）は1つの要素を参照するだけなので、IDセレクター宣言をその要素に適用するのは論理的ですよね？IDセレクターは、インラインスタイルと同じように、基本的に可能な限り最も具体的なものでなければならないと思うので、このCSS優先順位ロジックを本当に理解することはできません。

PS：私の悪い英語でごめんなさい:)

4

6 に答える 6

4

いいえ、セレクターのロジックによれば、そうではありません。

#header aより具体的です#login。#header aセレクターをに減らす#headerと、ヘッダーセレクターとログインセレクターの特異性が同じになり、最後に表現されたルール（ログインからの色の順序）が使用されます。タグ名を追加してログインセレクターの特異性を高めた場合も同様です。

于 2012-08-20T21:06:22.003 に答える
1

どのセレクターが最も少ない要素をターゲットにしているのかという意味では「特異性」を見ることができませんが、単に最も重要なものを見ることができます。

もちろん、やなどを区別することで、ルールをさらに複雑にすることもでき#header aますa#login。ただし、これにより、システム全体がさらに混乱します。
また、これ（c / w）は、次のように悪用される可能性があります。-header#header aこれにより、より高い特異性が追加されますが、より多くの要素をターゲットにすることもできます。

私の意見では、これはシステムにそれ以上の価値を追加することはありませんが、それをより複雑にするだけです。

CSSを作成するときは、パフォーマンスの問題のために、常にルールをできるだけ短くするようにしてください。ルールを上書きする必要がある場合でも、別のルールを追加する可能性がありますid。class通常のカスケードに加えて、これで十分です。

于 2012-08-20T21:14:32.707 に答える
1

あなたは、 w3css仕様の一部として徹底的に説明されている特異性の概念に精通しているようです。アルゴリズムの観点から、ルール宣言のセレクターの特異性の値は、フラットウェイトまたは非定位です。これは、#header aとa#loginが同じ特異性を持っていることを意味します。つまり、要素が両方のルールに適格である場合、後者が優先されます。

個人的には、セマンティックな特異性はあるが計算上の値がないセレクターを理解するのに、はるかに長い時間がかかりました。たとえば、後者はより具体的に「感じ」ますが、同じ重みul liを持っています！ul>li

関数型プログラミングのバックグラウンドを持っている人なら誰でも、特異性を4バイト値として比較する方が簡単だと思います（これは実際、主要なブラウザーでの実装方法に近いため、同じ重みの256以上のセレクターを使用すると値がオーバーフローします:)

于 2012-08-20T23:17:38.867 に答える
0

OP、おそらくCSSは最初の引数（#headerと#login）を最初に処理し、その後で2番目の引数（ "#header a"のa）を処理すると考えることができます。

したがって、最初のプロセスでは赤になり、次に青になりますが、2番目のプロセスでは、2番目の引数の「a」のために赤に上書きされます。

于 2012-08-20T21:14:07.853 に答える
0

それは特異性にかかっています-より具体的にすれば、それはあなたのために働くでしょう：

header a#login {
 color: #00F; /* Blue */
}​
于 2012-08-20T21:00:20.303 に答える
0

これを修正するために必要なのは、このコマンドがリンクに固有であることをDOMに通知するように変更#loginすることだけです。a#login

は、ランダムなIDだけでなく、DOM内の特定の要素を指しているという理由#header aだけでなく、より具体的です。#login

于 2012-08-20T21:27:30.743 に答える