CSS3 基础 - CSS3 选择器 - 属性选择器

核心知识点

属性选择器的基本语法
属性选择器的类型
属性选择器的使用方法
属性选择器的优先级
属性选择器的最佳实践
属性选择器的性能考虑

学习目标

掌握属性选择器的基本语法和各种类型
理解属性选择器的优先级规则
能够正确使用属性选择器进行元素定位
了解属性选择器的最佳实践和性能考虑
区分不同类型属性选择器的适用场景

重点难点

重点：属性选择器的语法和类型
难点：属性选择器的复杂匹配规则和性能优化

理论讲解

属性选择器的基本语法

属性选择器使用方括号 ([]) 来选择具有特定属性或属性值的元素。属性选择器的基本语法格式如下：

/* 选择具有特定属性的元素 */
[attribute] {
  /* CSS 属性 */
}

/* 选择具有特定属性值的元素 */
[attribute="value"] {
  /* CSS 属性 */
}

属性选择器的类型

CSS3 提供了多种类型的属性选择器：

存在性属性选择器：[attribute] - 选择具有指定属性的元素
精确匹配属性选择器：[attribute="value"] - 选择属性值完全匹配的元素
部分匹配属性选择器：
- [attribute~="value"] - 选择属性值包含指定单词的元素
- [attribute|="value"] - 选择属性值以指定前缀开头的元素
- [attribute^="value"] - 选择属性值以指定字符串开头的元素
- [attribute$="value"] - 选择属性值以指定字符串结尾的元素
- [attribute*="value"] - 选择属性值包含指定字符串的元素

属性选择器的优先级

属性选择器的优先级与类选择器相同，为 10。在 CSS 优先级规则中：

选择器类型	优先级值
ID 选择器	100
类选择器、属性选择器、伪类选择器	10
元素选择器、伪元素选择器	1
通配符选择器	0

属性选择器的使用场景

属性选择器适用于以下场景：

表单元素样式：根据表单元素的类型、状态等属性进行样式设置
链接样式：根据链接的 href 属性进行样式设置
自定义数据属性：根据 data-* 属性进行样式设置
特定属性值的元素：根据元素的特定属性值进行样式设置

代码示例

存在性属性选择器

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>存在性属性选择器</title>
  <style>
    /* 选择所有具有 title 属性的元素 */
    [title] {
      color: blue;
      text-decoration: underline;
    }
  </style>
</head>
<body>
  <p title="这是一个提示">这段文字有 title 属性</p>
  <p>这段文字没有 title 属性</p>
  <a href="#" title="链接提示">这个链接有 title 属性</a>
  <a href="#">这个链接没有 title 属性</a>
</body>
</html>

精确匹配属性选择器

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>精确匹配属性选择器</title>
  <style>
    /* 选择 type 属性值为 "button" 的 input 元素 */
    input[type="button"] {
      background-color: #4CAF50;
      color: white;
      padding: 10px 20px;
      border: none;
      cursor: pointer;
    }
    
    /* 选择 type 属性值为 "text" 的 input 元素 */
    input[type="text"] {
      padding: 8px;
      border: 1px solid #ddd;
    }
  </style>
</head>
<body>
  <input type="text" placeholder="文本输入框">
  <input type="button" value="按钮">
</body>
</html>

部分匹配属性选择器

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>部分匹配属性选择器</title>
  <style>
    /* 选择 href 属性值包含 "google" 的链接 */
    a[href*="google"] {
      color: #4285F4;
    }
    
    /* 选择 href 属性值以 "https" 开头的链接 */
    a[href^="https"] {
      background-color: #E8F0FE;
      padding: 2px 4px;
    }
    
    /* 选择 href 属性值以 ".pdf" 结尾的链接 */
    a[href$=".pdf"] {
      color: #D32F2F;
      font-weight: bold;
    }
  </style>
</head>
<body>
  <a href="https://www.google.com">Google 搜索</a><br>
  <a href="http://www.example.com">普通链接</a><br>
  <a href="document.pdf">PDF 文档</a><br>
  <a href="image.jpg">图片文件</a>
</body>
</html>

自定义数据属性选择器

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>自定义数据属性选择器</title>
  <style>
    /* 选择所有具有 data-category 属性的元素 */
    [data-category] {
      padding: 10px;
      margin: 5px;
      border: 1px solid #ddd;
    }
    
    /* 选择 data-category 属性值为 "electronics" 的元素 */
    [data-category="electronics"] {
      background-color: #E3F2FD;
    }
    
    /* 选择 data-category 属性值为 "clothing" 的元素 */
    [data-category="clothing"] {
      background-color: #F3E5F5;
    }
    
    /* 选择 data-price 属性值大于 500 的元素 */
    [data-price="500"], [data-price="1000"] {
      font-weight: bold;
      color: #C2185B;
    }
  </style>
</head>
<body>
  <div data-category="electronics" data-price="1000">智能手机</div>
  <div data-category="electronics" data-price="500">平板电脑</div>
  <div data-category="clothing" data-price="100">T恤</div>
  <div data-category="clothing" data-price="200">牛仔裤</div>
</body>
</html>

ASCII 示意图

属性选择器类型示意图

+-------------------------+
| 属性选择器类型           |
+-------------------------+
| [attribute]             |
| 存在性选择器             |
| 选择具有指定属性的元素     |
+-------------------------+
| [attribute="value"]     |
| 精确匹配选择器           |
| 选择属性值完全匹配的元素   |
+-------------------------+
| [attribute~="value"]    |
| 包含单词选择器           |
| 选择属性值包含指定单词的元素 |
+-------------------------+
| [attribute|="value"]    |
| 前缀选择器               |
| 选择属性值以指定前缀开头的元素 |
+-------------------------+
| [attribute^="value"]    |
| 开头匹配选择器           |
| 选择属性值以指定字符串开头的元素 |
+-------------------------+
| [attribute$="value"]    |
| 结尾匹配选择器           |
| 选择属性值以指定字符串结尾的元素 |
+-------------------------+
| [attribute*="value"]    |
| 包含匹配选择器           |
| 选择属性值包含指定字符串的元素 |
+-------------------------+

属性选择器使用场景示意图

+-------------------------+
| 属性选择器适用场景        |
+-------------------------+
| ✓ 表单元素样式           |
|   - input[type="text"]   |
|   - input[type="button"] |
+-------------------------+
| ✓ 链接样式               |
|   - a[href^="https"]    |
|   - a[href$=".pdf"]     |
+-------------------------+
| ✓ 自定义数据属性         |
|   - [data-category]      |
|   - [data-price]         |
+-------------------------+
| ✓ 特定属性值的元素        |
|   - [lang="en"]          |
|   - [title]              |
+-------------------------+

常见问题与解决方案

问题 1：属性选择器的性能问题

症状：在大型页面中使用复杂的属性选择器可能导致性能下降
解决方案：

避免在大型页面中过度使用复杂的属性选择器
结合元素选择器使用，如 input[type="text"] 比 [type="text"] 性能更好
对于频繁访问的元素，考虑使用类选择器

问题 2：属性选择器的浏览器兼容性

症状：某些旧浏览器可能不支持所有类型的属性选择器
解决方案：

对于需要支持旧浏览器的项目，检查属性选择器的兼容性
提供适当的降级方案
考虑使用现代 CSS 预处理工具

问题 3：属性值中的特殊字符

症状：属性值中包含特殊字符时，属性选择器可能无法正常工作
解决方案：

对于包含特殊字符的属性值，使用引号包裹
对于包含空格的属性值，使用 ~= 选择器

实战练习

练习 1：表单元素样式

使用属性选择器为不同类型的表单元素设置样式：

文本输入框 (type="text")
密码输入框 (type="password")
复选框 (type="checkbox")
单选按钮 (type="radio")
提交按钮 (type="submit")
重置按钮 (type="reset")

练习 2：链接样式

使用属性选择器为不同类型的链接设置样式：

外部链接 (href 以 "http" 开头)
内部链接 (href 以 "/" 开头)
锚点链接 (href 以 "#" 开头)
图片链接 (href 以图片扩展名结尾)
PDF 链接 (href 以 ".pdf" 结尾)

练习 3：自定义数据属性

创建一个产品列表，使用自定义数据属性和属性选择器：

使用 data-category 属性表示产品类别
使用 data-price 属性表示产品价格
使用 data-rating 属性表示产品评分
根据不同的属性值设置不同的样式

代码优化建议

结合元素选择器：使用 element[attribute] 而不是 [attribute]，提高性能
避免过度复杂：尽量使用简单的属性选择器，避免多层嵌套
合理使用：在适合的场景使用属性选择器，不要过度依赖
语义化：使用语义化的属性名，提高代码可读性
考虑性能：在大型页面中，注意属性选择器的性能影响

总结

属性选择器是 CSS3 中一种强大的选择器，具有以下特点：

灵活性：可以根据元素的属性和属性值进行选择
多样性：提供多种类型的属性选择器，满足不同的选择需求
语义化：可以根据元素的语义属性进行选择
优先级适中：优先级与类选择器相同，便于样式管理

在实际开发中，属性选择器特别适合用于表单元素样式、链接样式、自定义数据属性等场景。通过合理使用属性选择器，可以使 CSS 代码更加简洁、语义化，同时提高代码的可维护性。

通过本教程的学习，你应该已经掌握了属性选择器的基本语法和各种类型，能够在实际项目中正确应用属性选择器进行页面样式设计。