我想知道属性选择器的特殊性是什么.例如:
> Id = 100分
> Class = 10分
> Html Tag = 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>
这两个选择器中的哪一个更具体?
- .selectform input[type="text"] { }
- .selectform .inputbg { }
解决方法
属性选择器对类选择器同样具体.
在您的示例中,第一个选择器更具体,因为有一个额外的类型选择器输入使其击败第二个选择器.
每个选择器的特异性为calculated如下:
- /* 1 class,1 attribute,1 type -> specificity = 0-2-1 */
- .selectform input[type="text"] { }
- /* 2 classes -> specificity = 0-2-0 */
- .selectform .inputbg { }