简介
在CSS中，[attribute=value]选择器用于匹配属性值完全等于特定值的元素。这种选择器允许开发者基于元素的属性及其确切值来应用样式。
基本语法
基本语法如下：
element[attribute="value"] {
/* 样式规则 */
}例如，如果你想要为所有input标签中type属性值为text的元素添加样式，可以这样写：
input[type="text"] {
border: 1px solid #ccc;
padding: 5px;
}使用场景
选择特定类型的输入字段
在表单设计中，经常需要对不同类型的输入字段应用不同的样式。例如，文本输入框和密码输入框可能需要不同的边框或背景颜色。
// www.javascriptcn.com code example
/* 文本输入框 */
input[type="text"] {
background-color: #f9f9f9;
}
/* 密码输入框 */
input[type="password"] {
background-color: #eaeaea;
}根据属性值区分链接样式
对于链接（a元素），可以根据它们的href属性值来改变样式。比如，你想让指向外部网站的链接显示为红色。
/* 外部链接 */
a[href^="http://"], a[href^="https://"] {
color: red;
}控制特定类别的列表项样式
在HTML文档中，有时需要根据列表项中的特定信息来调整样式。例如，一个产品目录可能包含不同类别的商品，你可以通过类别名称来设置不同的样式。
<ul>
<li class="product category-electronics">电子产品</li>
<li class="product category-clothing">服装</li>
</ul>.product[category="electronics"] {
font-weight: bold;
}
.product[category="clothing"] {
color: blue;
}动态内容处理
当页面内容是动态生成时，可以根据某些属性来应用样式，而无需修改JavaScript代码。例如，在用户界面中显示特定类型的消息。
<div class="message" data-type="warning">警告信息</div> <div class="message" data-type="success">成功信息</div>
.message[data-type="warning"] {
background-color: yellow;
}
.message[data-type="success"] {
background-color: lightgreen;
}注意事项
- 精确匹配：
[attribute="value"]选择器只匹配属性值完全等于指定值的情况。如果属性值包含额外的空格或其他字符，则不会被选中。 - 性能考虑：尽管现代浏览器已经非常高效，但使用过多的选择器仍然可能影响渲染性能。因此，建议仅在必要时使用此选择器。
- 兼容性：此选择器在所有主流浏览器中都得到了良好的支持，包括较旧的版本。
实例
下面是一个综合实例，展示了如何结合使用多种属性选择器来创建具有不同样式的按钮。
<button type="button" class="btn" data-size="small">小按钮</button> <button type="button" class="btn" data-size="medium">中按钮</button> <button type="button" class="btn" data-size="large">大按钮</button>
// www.javascriptcn.com code example
.btn[data-size="small"] {
padding: 5px 10px;
font-size: 12px;
}
.btn[data-size="medium"] {
padding: 8px 16px;
font-size: 14px;
}
.btn[data-size="large"] {
padding: 10px 20px;
font-size: 16px;
}通过上述示例，可以看到[attribute=value]选择器的强大功能以及它在实际项目中的广泛应用。希望这些内容能帮助你在日常开发工作中更有效地利用CSS属性选择器。