CSS属性选择器用法详解
CSS属性选择器是CSS选择器中非常实用的一种类型，它允许开发者根据HTML元素的属性及其属性值来匹配元素，不需要额外给元素添加class或者id就能实现精准样式控制。下面我们就来详细介绍CSS属性选择器的常见用法，并搭配代码示例说明。
一、存在性选择器
存在性选择器用来匹配包含指定属性的所有元素，不管该属性的值是什么，只要元素有这个属性就会被选中。
语法格式：[属性名]
比如我们要给所有带有title属性的元素添加下划线样式，就可以使用存在性选择器：
/* 选中所有包含title属性的元素 */
[title] {
text-decoration: underline;
color: #333;
}下面的HTML元素中，第一个<div>有title属性，会被上述样式选中，第二个没有title属性则不会生效：
<div title="这是提示文本">有title属性的div</div> <div>没有title属性的div</div>
二、属性值完全匹配选择器
这种选择器会匹配属性值完全等于指定值的元素，只有属性值和给定值完全一致时才会生效。
语法格式：[属性名="属性值"]
比如我们要给所有type为text的<input>元素设置边框样式：
/* 选中type属性值为text的input元素 */
input[type="text"] {
border: 1px solid #ccc;
padding: 6px 10px;
border-radius: 4px;
}对应的HTML示例中，只有第一个<input>会被选中：
<input type="text" placeholder="请输入用户名"> <input type="password" placeholder="请输入密码">
三、属性值包含匹配选择器
该选择器会匹配属性值中包含指定字符串的元素，只要属性值里出现了目标字符串就会被选中，不需要完全相等。
语法格式：[属性名*="字符串"]
比如我们要给所有class属性中包含btn的元素设置基础按钮样式：
/* 选中class属性中包含btn字符串的元素 */
[class*="btn"] {
display: inline-block;
padding: 8px 16px;
cursor: pointer;
border: none;
border-radius: 4px;
font-size: 14px;
}下面的HTML元素中，两个<button>的class都包含btn，都会被选中：
<button class="btn primary-btn">主要按钮</button> <button class="small-btn">小按钮</button>
四、属性值开头匹配选择器
这种选择器匹配属性值以指定字符串开头的元素，常用来匹配特定的前缀属性值。
语法格式：[属性名^="字符串"]
比如我们要给所有href以https://ipipp.com开头的链接设置特殊颜色：
/* 选中href以https://ipipp.com开头的a元素 */
a[href^="https://ipipp.com"] {
color: #e63946;
font-weight: bold;
}对应的HTML示例中，第一个链接会被选中：
<a href="https://ipipp.com/index">ipipp首页</a> <a href="https://www.baidu.com">百度首页</a>
五、属性值结尾匹配选择器
该选择器匹配属性值以指定字符串结尾的元素，常用来匹配文件后缀、特定结尾的属性值。
语法格式：[属性名$="字符串"]
比如我们要给所有href以.pdf结尾的链接添加PDF图标标识：
/* 选中href以.pdf结尾的a元素 */
a[href$=".pdf"]::after {
content: " (PDF文件)";
font-size: 12px;
color: #666;
}下面的HTML元素中，第一个链接会被选中：
<a href="https://ipipp.com/guide.pdf">使用指南</a> <a href="https://ipipp.com/intro.html">介绍页</a>
六、属性值单词匹配选择器
这种选择器匹配属性值是独立单词或者由空格分隔的单词列表中包含目标单词的元素，和*=的区别是它要求完整的单词匹配，不会匹配部分字符串。
语法格式：[属性名~="单词"]
比如我们要给class中包含独立单词active的元素设置激活样式：
/* 选中class属性中包含独立单词active的元素 */
[class~="active"] {
background-color: #f0f0f0;
color: #1d3557;
}下面的HTML元素中，第一个<li>会被选中，第二个不会被选中，因为第二个的class里active是active-item的一部分，不是独立单词：
<li class="nav-item active">首页</li> <li class="nav-item active-item">列表页</li>
七、属性值连字符匹配选择器
该选择器匹配属性值等于指定值，或者属性值以指定值-开头的元素，常用来匹配语言相关的属性，比如lang属性。
语法格式：[属性名|="值"]
比如我们要给lang属性为zh或者zh-开头的元素设置中文字体：
/* 选中lang为zh或者zh-开头的元素 */
[lang|="zh"] {
font-family: "Microsoft YaHei", sans-serif;
}下面的HTML元素中，两个<p>都会被选中：
<p lang="zh">这是简体中文内容</p> <p lang="zh-CN">这是中国大陆地区的中文内容</p>
八、组合使用属性选择器
属性选择器还可以和其他选择器组合使用，也可以多个属性选择器同时匹配同一个元素，实现更精准的选择。
比如我们要给type为checkbox且disabled属性存在的复选框设置禁用样式：
/* 同时匹配type为checkbox、存在disabled属性的input元素 */
input[type="checkbox"][disabled] {
opacity: 0.5;
cursor: not-allowed;
}对应的HTML示例中，第一个复选框会被选中：
<input type="checkbox" disabled> 不可选的复选框 <input type="checkbox"> 可选的复选框
总结
CSS属性选择器的灵活性很高，不需要额外添加多余的class就能根据元素的属性实现样式控制，在实际开发中可以减少HTML的冗余代码。不同类型的属性选择器适用场景不同，大家可以根据实际需求选择合适的选择器类型，也可以组合使用来实现更复杂的匹配逻辑。