6

このチュートリアルからセレクターの優先順位について学びました。あるケースでは、これの動作を理解するのに苦労しています。HTMLに要素があります：

<input class="top_bar_login_form_input" type="text"  name="email" placeholder="Prijavno ime">

問題は、別のセレクターのプロパティがクラスのプロパティをオーバーライドすることです。

写真

上の図に示されているように、クラスはあまり具体的でないセレクターによってオーバーライドされます。要素はinput[type="text"]、クラスよりも具体的ではないによって選択されます。私が見るこれらの振る舞いの背後にある唯一の理由は、.inputboxクラスが要素と一致していなくても、優先順位を決定する際にクラスも計算されるということです。

タイプセレクターがクラスセレクターをオーバーライドするのはなぜですか？

4

2 に答える 2

11

TL;DR回答

最初のルールは、セレクターのタイプと属性の両方の部分があり、優先順位が高いため、2番目のルールよりも具体的です。

input[type="text"] { }         /* type + attribute for specificity */
.top_bar_login_form_input { }  /* only class for specificity, so *less* specificity */

長い答え

特異性に関するMDNページによると、属性セレクターであるtype="text"ビットは、クラスセレクターよりも特異的であると思われるでしょう。

次のセレクターのリストは、特異性を高めることによるものです。

  • ユニバーサルセレクター
  • タイプセレクター
  • クラスセレクター
  • 属性セレクター
  • 疑似クラス
  • IDセレクター
  • インラインスタイル

上記の引用は、この回答が書かれた時点のMDNの記事にありました。

それが誤解を招く理由：

（@BoltClockの洞察にタンクします。）

上記は正しいように思わinput[type="text"]れますが、これは通常、属性セレクターを実行するときに要素をセレクター（たとえば）に含めるためです。ただし、卑劣なこと：inputビットが重要です。

次のマークアップがあるとします。

<input class="my-class" type="text" value="some value" />

次のシナリオでは、入力が赤にレンダリングされます。

[type="text"] { color: green; }
.my-class { color: red; }             /* last rule matched */

シナリオでルールを逆にすると、入力は緑色になります。

.my-class { color: red; }
[type="text"] { color: green; }       /* last rule matched */

これは、両方のセレクターの特異性が等しいためです。ここで、セレクターを属性ルールに導入するinputと、そのうちの1つがより具体的になります。これは、このシナリオで確認できます。

input[type="text"] { color: green; }  /* most _specific_ rule matched */
.my-class { color: red; }

W3仕様は私の頭を痛めますが、上記が機能する理由の詳細が含まれています。特異性の計算方法については、@BoltClockによる回答とそれらのコード例のコメントも参照してください。

于 2013-02-02T21:21:42.273 に答える
7

input[type="text"]あなたの要素は最初のルールで一致しています。セレクターはそれに一致しませんが、セレクターのコンマ区切りリストは、要素に一致する.inputboxリスト内の最も具体的なセレクターによってのみカウントされるため、優先順位には影響しません。どのセレクターもそれに一致しない場合は、まったくカウントされません。

最初のルールが2番目のルールをオーバーライドする理由は、クラスセレクターと属性セレクターの特異性が等しいためです。input属性セレクターに付随する（または付随する）タイプセレクターは、それが唯一のクラスセレクターを上回る原因となります。

/* 1 attribute, 1 type -> specificity = 0-1-1 */
input[type="text"]

/* 1 class             -> specificity = 0-1-0 */
.top_bar_login_form_input

したがって、これは最初のセレクターが2番目のセレクターよりも具体的であり、その逆ではありません。

クラスセレクターをタイプで修飾するとinput.top_bar_login_form_input、セレクターのバランスがとれ、2番目のルールが最初のルールをオーバーライドします。

于 2013-02-03T05:45:27.580 に答える