什么是属性选择器
属性选择器是CSS选择器的一种，它通过元素的属性名或者属性值来匹配对应的HTML元素，不需要额外给元素添加特定的类名或者id，就能为符合属性条件的元素设置样式。在CSS3之前，属性选择器已经支持基础的属性存在匹配和精确值匹配，而CSS3新增的选择器进一步扩展了匹配规则，覆盖了更多常见的属性值匹配场景。
CSS3新增的属性选择器类型
1. 属性值开头匹配选择器 [attr^=value]
该选择器用于匹配属性attr的值以指定字符串value开头的元素，不管value之后还有没有其他内容，只要开头符合就会被选中。
/* 匹配所有href属性以https开头的a标签 */
a[href^="https"] {
color: #2ecc71;
text-decoration: none;
}
/* 匹配class属性以box开头的元素 */
[class^="box"] {
padding: 10px;
border: 1px solid #ddd;
}
2. 属性值结尾匹配选择器 [attr$=value]
该选择器用于匹配属性attr的值以指定字符串value结尾的元素，常用于匹配特定后缀的文件链接或者特定结尾的属性值。
/* 匹配所有href属性以.pdf结尾的a标签 */
a[href$=".pdf"] {
background: url(pdf-icon.png) no-repeat left center;
padding-left: 20px;
}
/* 匹配src属性以.png结尾的img标签 */
img[src$=".png"] {
border: 2px solid #3498db;
}
3. 属性值包含匹配选择器 [attr*=value]
该选择器用于匹配属性attr的值中包含指定字符串value的元素，只要属性值里出现value的任意连续子串就会被匹配到。
/* 匹配data-type属性包含user的元素 */
[data-type*="user"] {
font-weight: bold;
}
/* 匹配class属性包含btn的元素 */
[class*="btn"] {
border-radius: 4px;
cursor: pointer;
}
4. 属性值空格分隔匹配选择器 [attr~=value]
该选择器用于匹配属性attr的值是以空格分隔的多个值，且其中一个值恰好等于value的元素，和CSS3之前的精确匹配不同，它允许属性值有多个空格分隔的条目。
/* 匹配class属性包含单独的active类的元素，比如class="btn active"会被匹配，class="active-btn"不会被匹配 */
[class~="active"] {
background-color: #e74c3c;
color: white;
}
5. 属性值连字符分隔匹配选择器 [attr|=value]
该选择器用于匹配属性attr的值等于value，或者以value-开头的元素，通常用于匹配语言编码相关的属性，比如lang属性。
/* 匹配lang属性为zh或者zh-CN、zh-TW等的元素 */
[lang|="zh"] {
font-family: "Microsoft YaHei", sans-serif;
}
新增属性选择器的使用注意事项
- 属性选择器的权重和类选择器相同，权重值为10，优先级高于元素选择器，低于id选择器。
- 属性值匹配时默认是区分大小写的，如果需要不区分大小写，可以在选择器末尾添加
i标识，比如[attr*=value i]。 - 尽量在属性选择器前添加元素限定，比如
a[href^="https"]比单独的[href^="https"]性能更好，匹配范围更小。
总结
CSS3新增的5类属性选择器覆盖了属性值开头、结尾、包含、空格分隔、连字符分隔等多种匹配场景，配合原有的属性存在选择器[attr]和精确值匹配选择器[attr=value]，可以满足绝大多数基于属性筛选元素的样式需求。在实际开发中，合理使用这些选择器可以减少冗余的HTML类名定义，让样式代码更简洁易维护。