CSS | [属性=值] 选择器

CSS [属性=值] 选择器是一种用于选择具有特定属性值的 HTML 元素的 CSS 选择器。它通过筛选属性值来确定应用样式的元素。

语法

selector[attribute=value] {
    property: value;
}

• selector - 要选取的元素的选择器
• attribute - 要筛选的属性名称
• value - 要筛选的属性值

用法示例

假设有以下 HTML 代码：

<div class="box" data-color="green">这是一个绿色的盒子</div>
<div class="box" data-color="red">这是一个红色的盒子</div>
<div class="box" data-color="green">这是另一个绿色的盒子</div>

我们可以使用 [属性=值] 选择器来选取其中 data-color 属性值为 green 的盒子，并将其背景色设置为绿色：

.box[data-color=green] {
    background-color: green;
}

这将选择第一个和第三个盒子。它们的 data-color 属性值均为 green。

组合选择器

[属性=值] 选择器可以与其他选择器组合使用，以进一步筛选出要样式化的元素。

input[type="text"][name="username"] {
    font-family: Arial, sans-serif;
    font-size: 16px;
    padding: 10px;
}

这将会选择那些 type 属性为 text 且 name 属性为 username 的 input 元素。

注意事项

• 属性名和属性值都必须用引号括起来，例如 [class="box"]。
• 对于某些属性值，你可能需要区分大小写，比如 input[type="text"]。
• 如果属性值中有特殊字符或空格，需要使用反斜杠进行转义。
• IE6 和 IE7 不支持属性选择器。