属性选择器

属性选择器（Attribute Selector）是CSS中一种强大的选择器，它通过HTML元素的属性来选择元素。属性选择器可以根据属性是否存在、属性值的部分或全部内容来选择元素。

基本语法

属性选择器有多种形式，基本语法如下：

css 
/* 选择具有指定属性的元素 */
[attribute] {
  property: value;
}

/* 选择具有指定属性和值的元素 */
[attribute="value"] {
  property: value;
}

/* 选择具有指定属性且值以特定字符串开头的元素 */
[attribute^="value"] {
  property: value;
}

/* 选择具有指定属性且值以特定字符串结尾的元素 */
[attribute$="value"] {
  property: value;
}

/* 选择具有指定属性且值包含特定字符串的元素 */
[attribute*="value"] {
  property: value;
}

/* 选择具有指定属性且值包含特定单词的元素（单词之间用空格分隔） */
[attribute~="value"] {
  property: value;
}

/* 选择具有指定属性且值以特定单词开头的元素（单词之间用连字符分隔） */
[attribute|="value"] {
  property: value;
}

工作原理

属性选择器通过检查HTML元素的属性来匹配元素。根据不同的语法形式，它可以匹配具有特定属性、特定属性值或特定属性值模式的元素。

使用示例

示例1：选择具有特定属性的元素

html 
<a href="#">内部链接</a>
<a href="https://example.com">外部链接</a>
<span title="提示文本">带提示的文本</span>
css 
/* 选择所有具有href属性的元素 */
[href] {
  color: blue;
  text-decoration: underline;
}

/* 选择所有具有title属性的元素 */
[title] {
  cursor: help;
  border-bottom: 1px dotted #666;
}

这段CSS会选择所有具有href属性的元素（通常是链接）和所有具有title属性的元素，并为它们设置不同的样式。

示例2：选择具有特定属性值的元素

html 
<input type="text" placeholder="用户名">
<input type="password" placeholder="密码">
<input type="submit" value="提交">
css 
/* 选择type属性值为text的输入框 */
[type="text"] {
  width: 200px;
  padding: 8px;
  border: 1px solid #ccc;
}

/* 选择type属性值为password的输入框 */
[type="password"] {
  width: 200px;
  padding: 8px;
  border: 1px solid #ccc;
  margin-top: 10px;
}

/* 选择type属性值为submit的按钮 */
[type="submit"] {
  background-color: #4CAF50;
  color: white;
  padding: 10px 20px;
  border: none;
  cursor: pointer;
  margin-top: 10px;
}

这段CSS会根据type属性的值为不同类型的输入框设置样式。

示例3：选择具有特定属性值模式的元素

html 
<img src="image.jpg" alt="图片">
<img src="photo.png" alt="照片">
<a href="https://example.com">外部链接</a>
<a href="mailto:contact@example.com">邮件链接</a>
css 
/* 选择src属性值以.jpg结尾的图片 */
[src$=".jpg"] {
  border: 2px solid red;
}

/* 选择src属性值以.png结尾的图片 */
[src$=".png"] {
  border: 2px solid blue;
}

/* 选择href属性值以https://开头的链接 */
[href^="https://"] {
  color: green;
}

/* 选择href属性值以mailto:开头的链接 */
[href^="mailto:"] {
  color: orange;
}

这段CSS会根据属性值的模式为不同的元素设置样式。

特点

  1. 灵活性：可以根据属性的各种特征来选择元素
  2. 精确性：可以精确地选择具有特定属性或属性值的元素
  3. 中优先级：在CSS选择器优先级中，属性选择器的优先级与类选择器相同
  4. 动态性：可以用于选择动态生成的元素或具有特定数据属性的元素

注意事项

  1. 引号使用：属性值可以使用双引号、单引号或不使用引号，但建议始终使用引号以避免歧义
  2. 大小写敏感性：在HTML中，属性值不区分大小写，但在XHTML中区分大小写。为了保持一致性，建议使用小写的属性值
  3. 性能考虑：复杂的属性选择器可能会影响页面性能，尤其是在大型文档中
  4. 浏览器兼容性：基本的属性选择器（[attribute]和[attribute="value"]）在所有现代浏览器中都支持，但一些高级形式（如^=、$=、*=）在旧版浏览器（如IE6）中不支持

浏览器兼容性

选择器形式 Chrome Firefox Safari Edge IE
[attribute] 1+ 1+ 1+ 12+ 7+
[attribute="value"] 1+ 1+ 1+ 12+ 7+
[attribute^="value"] 1+ 3+ 3+ 12+ 9+
[attribute$="value"] 1+ 3+ 3+ 12+ 9+
[attribute*="value"] 1+ 3+ 3+ 12+ 9+
[attribute~="value"] 1+ 1+ 1+ 12+ 7+
`[attribute =“value”]` 1+ 1+ 1+ 12+

最佳实践

  1. 用于表单元素：使用属性选择器为不同类型的表单元素设置样式
  2. 用于数据属性：结合HTML5的数据属性（如data-*）使用，实现更灵活的选择
  3. 用于资源选择：根据文件扩展名选择不同类型的资源（如图片、链接等）
  4. 保持简洁：避免使用过于复杂的属性选择器，以提高性能和可读性

相关资源

学习建议

属性选择器是CSS中非常强大的选择器之一，建议初学者在掌握基本选择器后学习属性选择器。属性选择器在实际项目中常用于表单样式设计、资源选择和与JavaScript交互等场景。

最后更新：2026-02-07