属性选择器的各种形式

属性选择器是CSS中一种强大的选择器类型，允许开发者根据元素的属性及其值来匹配元素。它们可以精确地定位具有特定属性或属性值的元素，从而实现更灵活的样式控制。

基础属性选择器

基础属性选择器用于匹配具有指定属性的元素，无论该属性的值是什么。语法非常简单，只需在方括号内写入属性名即可。

/* 匹配所有带有title属性的元素 */
[title] {
  color: blue;
}

这个选择器会选中HTML中所有带有title属性的元素，比如：

<p title="important">这段文字会变成蓝色</p>
<a href="#" title="link">这个链接也会变蓝</a>

精确值属性选择器

精确值属性选择器要求元素的属性值必须完全匹配指定的值。语法是在属性名后加上等号和值。

/* 匹配所有type属性值为"text"的input元素 */
input[type="text"] {
  background-color: yellow;
}

这个选择器会精确匹配：

<input type="text"> <!-- 会被选中 -->
<input type="password"> <!-- 不会被选中 -->

包含值属性选择器

包含值属性选择器使用*=运算符，匹配属性值中包含指定字符串的元素。

/* 匹配所有class属性中包含"btn"的元素 */
[class*="btn"] {
  border: 1px solid #ccc;
}

这会匹配以下元素：

<button class="primary-btn">按钮</button>
<div class="btn-group"></div>

开头匹配属性选择器

开头匹配属性选择器使用^=运算符，匹配属性值以指定字符串开头的元素。

/* 匹配所有href属性以"https"开头的a元素 */
a[href^="https"] {
  color: green;
}

这会匹配：

<a href="https://example.com">安全链接</a>
<a href="http://example.com">不会被选中</a>

结尾匹配属性选择器

结尾匹配属性选择器使用$=运算符，匹配属性值以指定字符串结尾的元素。

/* 匹配所有src属性以".png"结尾的img元素 */
img[src$=".png"] {
  border: 2px solid red;
}

这会匹配：

<img src="logo.png">
<img src="icon.jpg"> <!-- 不会被选中 -->

空格分隔值属性选择器

空格分隔值属性选择器使用~=运算符，匹配属性值中包含以空格分隔的完整单词的元素。

/* 匹配所有class属性中包含"active"单词的元素 */
[class~="active"] {
  font-weight: bold;
}

这会匹配：

<div class="item active">当前项</div>
<div class="active-item">不会被选中</div>

连字符分隔值属性选择器

连字符分隔值属性选择器使用|=运算符，主要用于匹配语言属性，要求属性值完全匹配或以指定值开头后跟连字符。

/* 匹配lang属性为"en"或以"en-"开头的元素 */
[lang|="en"] {
  font-family: Arial;
}

这会匹配：

<p lang="en">英语内容</p>
<p lang="en-US">美式英语</p>
<p lang="fr">不会被选中</p>

大小写敏感属性选择器

CSS4引入了大小写敏感属性选择器，通过在属性选择器末尾添加i或s标志来控制匹配时是否区分大小写。

/* 不区分大小写匹配 */
[class*="example" i] {
  background: lightblue;
}

/* 区分大小写匹配 */
[class*="Example" s] {
  background: pink;
}

这会匹配：

<div class="EXAMPLE">匹配lightblue</div>
<div class="Example">匹配pink</div>

组合使用属性选择器

属性选择器可以与其他选择器组合使用，实现更精确的选择。

/* 匹配所有type为checkbox且disabled的input元素 */
input[type="checkbox"][disabled] {
  opacity: 0.5;
}

这会匹配：

<input type="checkbox" disabled>
<input type="checkbox"> <!-- 不会被选中 -->

属性选择器与伪类结合

属性选择器可以与伪类结合，实现更动态的效果。

/* 匹配所有href以"#"开头且被hover的a元素 */
a[href^="#"]:hover {
  text-decoration: none;
}

性能考虑

虽然属性选择器非常强大，但某些复杂的选择器可能会影响页面渲染性能。特别是通配符属性选择器在大型文档中可能导致性能下降。

/* 可能影响性能的选择器 */
[class*="col-"] {
  float: left;
}

浏览器兼容性

大多数现代浏览器都支持CSS2.1和CSS3的属性选择器。CSS4新增的大小写敏感标志支持度较低，使用时需要注意兼容性问题。

/* 提供回退方案 */
[class*="example"],
[class*="Example"] {
  background: lightblue;
}

实际应用案例

属性选择器在表单样式控制中特别有用：

/* 为必填字段添加特殊样式 */
input[required] {
  border-left: 3px solid red;
}

/* 为有效和无效的表单字段设置样式 */
input:valid {
  border-color: green;
}
input:invalid {
  border-color: red;
}

与CSS自定义属性结合

属性选择器可以与CSS变量结合，实现动态主题切换：

/* 根据data-theme属性切换主题 */
[data-theme="dark"] {
  --bg-color: #333;
  --text-color: #fff;
}

[data-theme="light"] {
  --bg-color: #fff;
  --text-color: #333;
}

在预处理器的使用

在Sass/Less等预处理器中，属性选择器可以嵌套使用：

form {
  input {
    &[type="text"], &[type="email"] {
      width: 100%;
    }
  }
}

特殊字符处理

当属性值包含特殊字符时，需要使用引号包裹：

/* 匹配包含特殊字符的属性值 */
[data-value="foo[bar]"] {
  color: purple;
}

动态属性选择

通过JavaScript动态添加的属性也可以被属性选择器匹配：

// 动态添加属性
document.querySelector('div').setAttribute('data-loaded', 'true');

/* 匹配动态添加的属性 */
div[data-loaded="true"] {
  opacity: 1;
  transition: opacity 0.3s;
}

属性选择器的优先级

属性选择器的优先级与类选择器相同，都是0-1-0。当与其他选择器组合时，优先级会相应增加。

/* 优先级为0-1-1 */
div[class="example"] {
  color: red;
}

/* 优先级为0-2-0 */
[class][id] {
  color: blue;
}

在响应式设计中的应用

属性选择器可以根据不同的数据属性应用响应式样式：

/* 根据data-screen属性应用不同样式 */
[data-screen="mobile"] .menu {
  display: none;
}

[data-screen="desktop"] .menu {
  display: block;
}

与ARIA属性的配合

属性选择器常用于为ARIA属性添加样式：

/* 为ARIA状态添加视觉反馈 */
[aria-disabled="true"] {
  opacity: 0.6;
  pointer-events: none;
}

[aria-expanded="true"]::after {
  content: "▼";
}

在打印样式中的使用

属性选择器可以为打印媒体创建特定样式：

@media print {
  /* 不打印带有data-no-print属性的元素 */
  [data-no-print] {
    display: none !important;
  }
}

属性选择器的局限性

虽然强大，但属性选择器不能用于匹配属性值的部分模式，比如正则表达式。某些复杂的匹配需求可能需要借助JavaScript实现。

/* 无法实现这样的匹配 */
[data-value="/\d+/"] {
  /* 不会工作 */
}