属性选择器

属性选择器 7种 属性选择器跟HTML的属性有关系

属性选择器的权重是10

属性选择器在用的时候，首先结构html必须有属性才可以用属性选择器

1、[属性]{} 只要有这个属性的都变

2、[属性=“属性值”]{} 只要有这个属性且有这个属性值的都变

3、[属性^=“属性值”]{} 只要有这个属性且以这个属性值开头的都变

4、[属性$=“属性值”]{} 只要有这个属性且以这个属性值结尾的都变

5、[属性 * =“属性值”]{} 只要有这个属性的都变

6、[属性！=“属性值”]{} 有这个属性值且以 XX-开头的属性值

7、[属性~=“属性值”]{} 只要有指定的属性值就可以,必须是完整的词

下面举几个例子：

标签是input且有属性type且属性值是t开头的才会变

   input[type^="t"]{ width: 300px; height: 300px;}  

标签是input且有属性type且属性值是t结尾的才会变

   input[type$="t"]{ width: 300px; height: 300px;}  

标签是input且有属性type且属性值是任意 会变

   input[type*="t"][name^="m"]{ width: 300px; height: 300px;} 

只要有指定的属性值就可以,必须是完整的词

   input[type~="text"]{width: 300px;height: 300px;} 

你的属性值是text或者text-开头的变化

   input[type！="text"]{width: 300px;height: 300px;}  

属性是title且属性值必须是boox

   a[title~="boox sv g"]{ border: 3px solid red;}  

属性是title且属性值是只有boox自己或者boox-开头的就行

    a[title|="boox"]{ border: 3px solid red;}