24

属性セレクターの特異性はどうなっているのか疑問に思っています。例えば：

  • ID = 100 ポイント
  • クラス = 10 ポイント
  • HTMLタグ＝1点

例：

/* this specificity value is 100 + 10 + 1 = 111 */
#hello .class h2 { }

この HTML では:

<div class="selectform">
<input type="text" value="inter text">
<input type="text" value="inter text" class="inputag">
</div>

これら 2 つのセレクターのうち、どちらがより具体的ですか?

.selectform input[type="text"] { }
.selectform .inputbg { }

デモを確認してください http://tinkerbin.com/IaZW8jbI

4

3 に答える 3

28

属性セレクターは、クラス セレクターにも同様に固有です。

inputあなたの例では、最初のセレクターは、2 番目のセレクターを打ち負かす追加のタイプ セレクターがあるため、より具体的です。

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

/* 1 class, 1 attribute, 1 type -> specificity = 0-2-1 */
.selectform input[type="text"] { }

/* 2 classes                    -> specificity = 0-2-0 */
.selectform .inputbg { }
于 2012-07-10T05:13:25.507 に答える
0

一般に、すべてのタイプのセレクターは同じです。重要なのは、式内のセレクターの数です。したがって、ID = 1、クラス = 1、および HTML タグ = 1 です。

2 つのセレクターが同じ特異性を持つ場合は、CSS ファイル内でさらに下にあるセレクターが「優先」されます。そのため、CSS 参照を一般的なものから具体的なものへと並べるようにしてください。jquery-ui.css などのライブラリが最初に配置され、CSS ファイルはそれらの後に配置されます。

于 2012-07-10T05:23:06.160 に答える