CSS属性选择器

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），更多前端干货将第一时间推送给你哦~~

扫描或长按关注前端微站