CSS属性选择器
CSS选择器主要分为五⼤类：元素选择器，关系选择器，属性选择器，伪类选择器和伪元素选择器。平时⽤的最多的是元素选择器和关系选择器，⽽本⽂主要讲讲⽤得⽐较少的属性选择器。
⾸先亮出本⽂通⽤的例⼦：
张三（zhangsan）
刘三（liusanjie）
张明（zhang-ming）
黎三（lisan）
李三（sandy lisan）
⽆名⽒
接下来分别举例讲讲七⼤属性选择器。
⼀、E[att]，筛选具有att属性的元素
css代码：
p[name]{ color: #f00;}
css选择器分为哪几类显⽰结果：
p[name]
可以看出，只要具有name属性的元素都会被筛选出来，⽽不具有name属性的“⽆名⽒”颜⾊没有变化。
⼆、E[att='val']，筛选att属性值为val的元素
css代码：
p[name='lisan']{ color: #f00;}
显⽰结果：
p[name='lisan']
可以看出，只要name属性值为“lisan”的元素都会被筛选出来，⽽name属性为“sandy lisan”的元素并不会被筛选。
三、E[att~='val']，属性值为⽤空格分隔的字词列表，其中⼀个等于val的元素（包含只有⼀个值且该值等于val 的情况）
css代码：
p[name~=lisan]{ color: #f00;}
显⽰结果：
p[name~=lisan]
可以看出，除了可以筛选出name属性值为“lisan”的元素，name属性值为“sandy lisan”的元素同样也会被筛选出来。
四、E[att^='val']，筛选att属性值以val开头的元素
css代码：
p[name^=zhang]{ color: #f00;}
显⽰结果：
p[name^=zhang]
可以看出，只要是name属性值以“zhang”开头的元素都会被筛选出来。
五、E[att$='val']，筛选att属性值以val结尾的元素
css代码：
p[name$=san]{ color: #f00;}
显⽰结果：
p[name$=san]
可以看出，只要是name属性值以“san”结尾的元素都会被筛选出来。
六、E[att*='val']，筛选att属性值中包含val的元素
css代码：
p[name*=san]{ color: #f00;}
显⽰结果：
p[name*=san]
可以看出，只要是name属性值中包含“san”的元素都会被筛选出来。
七、E[att|='val']，筛选att属性值以val开头并且其后紧跟着 “-” 的元素
css代码：
p[name|=zhang]{ color: #f00;}
显⽰结果：
image.png
可以看出，只要是name属性值以“zhang”开头并且其后紧跟着 “-” 的元素都会被筛选出来，所以只有“张明”颜⾊变红，⽽“张三”颜⾊不变。
兼容性：以上七个属性选择器均兼容主流浏览器，IE兼容到IE7，可以放⼼使⽤。
如果你喜欢或者经常使⽤的话，可以关注：前端微站（qianduanwz），更多前端⼲货将第⼀时间推送给你哦~~
扫描或长按关注前端微站

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。