3

Bootstrap のフォーム スタイルを使用して AngularJS の電子メール検証を実行しようとして、この CSS ブロックに出会いました。

input:focus:required:invalid,
textarea:focus:required:invalid,
select:focus:required:invalid {
  color: #b94a48;
  border-color: #ee5f5b;
}

input:focus:required:invalid:focus,
textarea:focus:required:invalid:focus,
select:focus:required:invalid:focus {
  border-color: #e9322d;
  -webkit-box-shadow: 0 0 6px #f8b9b7;
     -moz-box-shadow: 0 0 6px #f8b9b7;
          box-shadow: 0 0 6px #f8b9b7;
}

2 番目の :focus の方が優先度が高いことに気付きましたが、それ以上のものがあると思わずにはいられません。

ありがとう

4

1 に答える 1

3

特異度の計算に関する仕様の内容は次のとおりです。

セレクターの特異性は次のように計算されます。

  • セレクター内の ID セレクターの数を数える (= a)
  • セレクター内のクラスセレクター、属性セレクター、疑似クラスの数を数える (= b)
  • セレクター内の型セレクターと疑似要素の数を数える (= c)
  • ユニバーサルセレクターを無視する

否定疑似クラス内のセレクターは、他のものと同様にカウントされますが、否定自体は疑似クラスとしてカウントされません。

3 つの数 abc を (基数が大きい数体系で) 連結すると、特異性が得られます。

注: 同じ単純なセレクターを繰り返し使用することは許可されており、特定性が向上します。

一意性については何も書かれていないため、疑似クラスを 2 回記述すると、 が よりも具体的であるのと同様に、セレクターp.foo.fooがよりp.foo具体的になりますが、まったく同じ要素に一致します。

于 2013-06-30T01:55:50.370 に答える