CSS选择器主要分为五大类:元素选择器,关系选择器,属性选择器,伪类选择器和伪元素选择器。平时用的最多的是元素选择器和关系选择器,而本文主要讲讲用得比较少的属性选择器。
首先亮出本文通用的例子:
张三(zhangsan)
刘三姐(liusanjie)
张明(zhang-ming)
黎三(lisan)
李三(sandy lisan)
无名氏
接下来分别举例讲讲七大属性选择器。
一、E[att],筛选具有att属性的元素
css代码:
p[name]{ color: #f00;}
显示结果:
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),更多前端干货将第一时间推送给你哦~~
扫描或长按关注前端微站