10

大きな太字のキャップロック TL;DR:

私はセレクターの特異性がどのように決定されるかを知っています。それは欠陥のある仮定を使用していると思いますが、有効な集合理論の関係で私のイライラを裏付けることができます。特異性について W3 計算規則を説明することに応答しないでください。質問を読んでください <- それを読んでください。

これは、以下のような HTML のスタイルを作成するときに、しばらく気になりました。

...
<div id="outer">
    <span id="inner"></span>
    <span></span>
    ...
</div>
...

特異性ルールがセレクター「#outer span」を「#inner」よりも具体的にするのはなぜですか? ID は一意なので、「#inner」と言うと、1 つの要素しか参照できないのに、なぜ具体性が低いのでしょうか? 具体性を判断する際のルールは理解していますが、これが意図的なものなのか偶発的なものなのか、CSS 標準を書いている人にこの質問をする方法を誰かが知っているのだろうかと思います。

私は #outer #inner を使用して最大の特異性を確保できることを理解していますが、それはそもそも ID の目的を無効にしているようです。これは、私がテンプレートを書いているときに問題のある解決策でもあり、ある ID が別の ID の中にあるかどうか確信が持てません。私は回避策を探しているのではなく、理論的な答えを探しているだけです。

私の質問は理論であり、完全に設定されたロジックに基づいています。私が持っているのは、n個の可能なアイテムの1つのアイテムのルールを定義する場合、それはできる限り具体的ではないということですか? CSS セレクターの作成者は、より具体的なルールとして、m が n のサブセットである場合に、n 個の可能なアイテムの m 個のアイテムを定義できるルールを作成するのはなぜですか?

私の考えでは、#id は 1 つのアイテムを名前で識別するのと同等であり、#id elm は名前でアイテムとの関係によってグループを識別します。名前付きのリレーションを持つ名前のないグループよりも具体的でない名前付きのアイテムを呼び出すことは、完全に直観に反しています。

4

4 に答える 4

9

「なぜ」という考えは、より「世代」または「権威」の視点だと思います。#Parent（任意の世代の）資格「x」（あなたの場合、span）を満たすすべての私の子供に「y」（CSSプロパティが何であれ）の継承が与えられると言った場合、単一の個人が何を望んでいるのかは問題ではありませ#Childん、#Parent親がそうでないと述べた場合、それを取得するにはの権限が必要です。

編集時に追加:インラインstyleは反抗的な子になり!important、取り締まる親になります。編集：これはユーモアのために残しましたが、それがアイデアや以下の私の後の声明を反映しているとは思いません.

コメントの質問に編集時に追加:与えられた:

#outer span ...
#inner (which is a span element)

次に、 #inner selection を保証するために、次のことをお勧めします。

body span#inner (*edit:* just span#inner works *edit:* if defined later)

または体にIDを与えて

#bodyId #inner

もちろん、これらは引き続きオーバーライドできます。「世代」が多ければ多いほど、世代間のコンセンサスのために行動を変えるのが難しくなります（ひいおじいちゃん、おじいちゃん、親がすべて同意している場合、子供は自分のことをやり遂げることができなくなる可能性があります）。 .

この HTML を考えると、後の編集でこのセクションを大幅に書き直す必要がありました。

<div id="grandparent">
  <div id="parent">
    <div id="child"></div>
  </div>
</div>

私は以前、「#parent divよりも大きな権限を持っ#grandparent divている。どちらも世代の権限を持っています。実際、「等しい」世代の権限を持っていますが、最初の世代は「より近い」世代です」と述べました。その誤りは、世代的に「近い」ことは問題ではなく、権限が付与されるのが最後であるということです。同等の権限が与えられた場合、最後に指定された自分が勝つものです。

私はまだこの声明を支持できると信じています。その考えを念頭に置いて、#child[id] のようなセレクター (以前の両方のセレクターよりも重要です) は、その属性を、それ自体が制御するものを支配するためのより大きな権限の許可として扱います。# はすでに権限を与えていますが、以前の世代がより多くの権限を付与する別のセレクターも持っている場合、以前の世代の # をオーバーライドするには不十分です。

したがって、それが権威を#grandparent div受け取るのが最後である場合[これを追加]ではありません。選択性が等しい場合は、最後に権限を付与されたものが優先されます。#childdiv#child #child[id][id]#child

繰り返しになりstyleますが、スタイル プロパティ自体を設定する属性は、実際には、自分自身を支配する権限を付与する最高の権限のように機能し!importantます。

「なぜ」それがこのようになっているのか（そして「セット」理論に沿っていない）に答える要約文として、私はそれが正確さや実際には特異性でさえないと信じています（それは使用されている用語ですが）実際に予想されるように#ChildsNameこれ以上具体的に言う必要はありませんので、この件に関して唯一の発言権を持っていることを確認してください。むしろ、ドキュメントにはそのように記載されていないかもしれませんが、「選択性」は実際には権限の付与に基づいて構成されています。要素を支配する「権利」を最も多く持っているのは誰で、「引き分け」が与えられた場合、それらの権利を最後に付与されたのは誰ですか。

于 2010-07-22T18:07:44.750 に答える
3

#outer spanID セレクターと要素セレクターの両方を備えているためです。その要素セレクターは、それをより重くするもの#innerです。

前者は「IDの任意の要素内にある任意の要素を選択する」ことを意味します。 後者は、「 ID がの任意の要素を選択する」ことを意味します。HTML ドキュメントのどこにあるかわからないため、具体性が低くなります。outer
inner#inner

おそらくあなたができる試す#outer #innerか、span#inner#outer span#inner代わりに試してください。

于 2010-07-22T17:33:35.153 に答える
1

どのように

特異度を計算するための W3C 規則:

  • 宣言がセレクタ付きのルールではなく 'style' 属性である場合は 1、そうでない場合は 0 (= a) (HTML では、要素の「スタイル」属性の値はスタイル シートのルールです。これらのルールにはセレクタがありません。つまり、a=1、b=0、c=0、d=0 です。)
  • セレクター内の ID 属性の数をカウントする (= b)
  • セレクター内の他の属性と疑似クラスの数をカウントします (= c)
  • セレクター内の要素名と疑似要素の数を数える (= d)

特異性は、セレクターの形式のみに基づいています。特に、"[id=p33]" という形式のセレクターは、id 属性が "ID " ソース ドキュメントの DTD 内。

4 つの数 abcd を (基数が大きい数体系で) 連結すると、特異性が得られます。また、ルールの特異性が同じ場合は、最後のルールが優先されます。

例

  • 外側スパン: a=0、b=1、c=0、d=1 --> 101

  • span#inner: a=0, b=1, c=0, d=1 --> 101
  • div#outer span#inner: a=0, b=2, c=0, d=2 --> 202

ルール 1 と 3 を並べ替えてみてください: http://jsfiddle.net/Wz96w/

どうして

私の考えでは、 #inner は一意の要素を指定していません。ページごとに 1 つの要素のみですが、その ID は別のページではまったく異なる要素である可能性があります。

1ページ：

<div id="outer">
  <div id="inner"> ... </div>
</div>

別のページ:

<ul id="outer">
  <li>main1
    <ul id="inner">
      <li>sub1</li>
      <li>sub2</li>
    </ul>
  </li>
  <li>main2</li>
</ul>

ただし、このようにコーディングするつもりはありません。ul#outer要素 ( vs. #outer) を追加することが、特別な具体性に値する理由を説明していると思います。

子孫の要点として、マークアップの DOM を視覚化しています。ルール#outer spanのパスの長さが のパスの長さよりも長くなってい#innerます。したがって、この場合、それはより具体的なサブツリーを指定するため、より具体的なものを与える必要があります (そして、#outer #inner liよりも価値がある [である] 必要があります#inner li)。

于 2010-07-22T18:00:47.447 に答える
0

私にとって、そして私はこれを完全に意見に基づいています。それは予想される「自然な」動作です。

このことを考慮：

CSS の特異性がどのように計算されるかはご存じであり、その式から#outer spanが よりも具体的であることがわかります#outer。これは、CSS 全体が正しく機能するために必要であり、理にかなっています。はスタイルシートのドメイン内でも論理的である#outer spanよりも具体的です(は ID にすぎず、ID に要素を加えたものです。したがって、スタイルシートだけを見ている場合にそれらをランク付けするには、より修飾されたものが必要です。具体的に）。#inner#inner#outer span

ここで起こっていることは、HTML マークアップのコンテキストを適用して、「それは意味がない」と言っていることです。期待どおりに動作させるには、ブラウザは次のことを考慮する必要があります。

  • これ<span id="inner">は中にあります<div id="outer">
  • #outer spanおよび#inner適用されるスタイルシート規則
  • ルール#outer spanはより具体的です#inner
  • ちょっと待って！<span id="inner">の中<div id="outer">にあるので、スタイルシートに基づく計算を無視して、#innerより具体的な主張を行う

この最後のステップでは、HTML の構造に完全に基づいて判断プロセスが行われるため、CSS だけで特定性を定義することはできません。個人的には、これによりプロセス全体がより複雑になり、定義が難しくなると思いますが、同意しない場合もあります.

于 2010-07-22T18:31:15.547 に答える