html – 属性选择器的特殊性是什么?

前端之家收集整理的这篇文章主要介绍了html – 属性选择器的特殊性是什么?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我想知道属性选择器的特殊性是什么.例如:

> Id = 100分
> Class = 10分
> Html Tag = 1点

例:

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

使用此HTML:

  1. <div class="selectform">
  2. <input type="text" value="inter text">
  3. <input type="text" value="inter text" class="inputag">
  4. </div>

这两个选择器中的哪一个更具体?

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

检查演示http://tinkerbin.com/IaZW8jbI

解决方法

属性选择器对类选择器同样具体.

在您的示例中,第一个选择器更具体,因为有一个额外的类型选择器输入使其击败第二个选择器.

每个选择器的特异性为calculated如下:

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

猜你在找的HTML相关文章