属性选择器的各种形式

属性选择器是CSS中一种强大的工具，允许开发者根据元素的属性或属性值来精确选择目标元素。它们可以单独使用，也可以与其他选择器组合，实现更灵活的样式控制。属性选择器的形式多样，从简单的存在性检查到复杂的值匹配，覆盖了各种应用场景。

基本属性选择器

最基本的属性选择器通过方括号[]包裹属性名，匹配所有具有该属性的元素，无论属性值是什么。这种形式适用于需要针对某一类带有特定属性的元素统一设置样式的情况。

/* 匹配所有带有title属性的元素 */
[title] {
  border: 1px solid #ccc;
}

<!-- 以下元素都会被匹配 -->
<div title="example">带标题的div</div>
<a href="#" title="link">带标题的链接</a>

精确值匹配选择器

在属性名后添加等号和值，可以精确匹配属性值完全等于指定值的元素。这种形式常用于针对特定状态的元素设置样式。

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

<!-- 只有第一个input会被匹配 -->
<input type="text" placeholder="用户名">
<input type="password" placeholder="密码">

包含子串匹配选择器

使用*=操作符可以匹配属性值中包含指定子串的元素。这种匹配方式不要求子串出现在特定位置，只要存在即可。

/* 匹配href属性中包含"example"的a元素 */
a[href*="example"] {
  color: red;
}

<!-- 以下链接都会被匹配 -->
<a href="https://example.com">主站</a>
<a href="https://test.example.org">测试站</a>
<a href="https://demo-example.net">演示站</a>

前缀匹配选择器

^=操作符用于匹配属性值以指定字符串开头的元素。这种形式特别适用于匹配具有共同前缀的URL或ID等属性。

/* 匹配href属性以"https"开头的a元素 */
a[href^="https"] {
  font-weight: bold;
}

<!-- 只有前两个链接会被匹配 -->
<a href="https://site.com">安全链接</a>
<a href="https://api.site.com">API</a>
<a href="http://legacy.site.com">旧版</a>

后缀匹配选择器

与前缀匹配相反，$=操作符匹配属性值以指定字符串结尾的元素。这在处理文件扩展名或特定后缀的类名时特别有用。

/* 匹配href属性以".pdf"结尾的a元素 */
a[href$=".pdf"] {
  background: url(pdf-icon.png) no-repeat left center;
  padding-left: 20px;
}

<!-- 只有PDF链接会被匹配 -->
<a href="document.pdf">下载文档</a>
<a href="report.doc">Word文档</a>
<a href="presentation.pdf">演示文稿</a>

空格分隔列表匹配选择器

~=操作符用于匹配属性值是以空格分隔的列表中包含指定完整单词的元素。这种形式常用于处理class属性。

/* 匹配class属性中包含"active"的元素 */
[class~="active"] {
  background-color: yellow;
}

<!-- 只有前两个元素会被匹配 -->
<div class="item active">活跃项目</div>
<p class="text active highlight">活跃文本</p>
<span class="active-item">不会被匹配</span>

连字符分隔匹配选择器

|=操作符匹配属性值是以连字符分隔的字符串，且第一个部分等于指定值的元素。这种形式主要用于语言子代码匹配。

/* 匹配lang属性以"en"开头或以"en-"开头的元素 */
[lang|="en"] {
  font-family: "Times New Roman", serif;
}

<!-- 以下元素都会被匹配 -->
<p lang="en">英语</p>
<div lang="en-US">美式英语</div>
<span lang="en-GB">英式英语</span>

大小写敏感匹配选择器

在属性选择器后添加i或I修饰符可以使匹配不区分大小写。这在处理用户生成内容或不同来源的数据时特别有用。

/* 匹配data-type属性值为"feature"的元素，不区分大小写 */
[data-type="feature" i] {
  border-left: 3px solid blue;
}

<!-- 以下元素都会被匹配 -->
<div data-type="feature">特性1</div>
<li data-type="FEATURE">特性2</li>
<section data-type="Feature">特性3</section>

组合使用属性选择器

多个属性选择器可以组合使用，实现更精确的选择。这种组合方式可以创建非常具体的匹配规则。

/* 匹配同时具有type="submit"和disabled属性的button元素 */
button[type="submit"][disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}

<!-- 只有第一个按钮会被匹配 -->
<button type="submit" disabled>提交</button>
<button type="submit">可用提交</button>
<button type="button" disabled>普通按钮</button>

属性选择器与伪类结合

属性选择器可以与伪类结合使用，创建基于状态和属性的复杂选择规则。这种组合大大增强了CSS的选择能力。

/* 匹配href属性以"#"开头且处于悬停状态的a元素 */
a[href^="#"]:hover {
  text-decoration: underline;
  color: darkblue;
}

<!-- 悬停时样式会生效 -->
<a href="#section1">跳转到章节1</a>
<a href="https://site.com">外部链接</a>

性能考虑与最佳实践

虽然属性选择器非常强大，但过度复杂的选择器可能影响页面渲染性能。一般来说，简单的属性选择器性能与类选择器相当，但包含复杂匹配模式的选择器可能较慢。建议将属性选择器限制在必要范围内，避免深层嵌套。