【H5 前端开发笔记】第 19 期：CSS 选择器 (4) —— 属性选择器 详解
属性选择器（Attribute selectors）是 CSS 中非常实用且强大的一类选择器，它根据元素的属性（attribute）及其值来匹配元素。
从 CSS2 开始引入，CSS3 又增加了几种更精细的匹配方式，目前现代浏览器全部支持。
一、属性选择器的 7 种核心写法（最常用的是前 6 种）
| 序号 | 写法 | 含义 | 匹配条件 | CSS 版本 | 典型场景 |
|---|---|---|---|---|---|
| 1 | [attr] | 属性存在即可 | 只要有 attr 属性（值是什么都行） | CSS2 | [disabled]、[target]、[data-*] |
| 2 | [attr=”val”] | 属性值完全相等 | 必须完全等于 val（区分大小写） | CSS2 | [type=”checkbox”]、[lang=”zh-CN”] |
| 3 | [attr~=”val”] | 属性值包含这个单词（空格分隔） | val 是以空格分隔的词之一 | CSS2 | class、rel、data-role 等多值属性 |
| 4 | [attr|=”val”] | 属性值以 val- 开头 | val 本身 或 val- 开头 | CSS2 | lang=”zh” 匹配 zh、zh-CN、zh-TW |
| 5 | [attr^=”val”] | 属性值以 val 开头 | 前缀匹配 | CSS3 | href^=”https://”、class^=”btn-“ |
| 6 | [attr$=”val”] | 属性值以 val 结尾 | 后缀匹配 | CSS3 | href$=”.pdf”、src$=”.jpg” |
| 7 | [attr*=”val”] | 属性值任意位置包含 val | 子字符串匹配 | CSS3 | href=”login”、title=”登录” |
二、代码示例（推荐全部敲一遍）
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>属性选择器演示</title>
<style>
/* 1. [attr] → 只要有这个属性就选中 */
a[target] {
color: #f44336; /* 所有有 target 属性的链接变红 */
font-weight: bold;
}
/* 2. [attr="value"] → 完全相等 */
input[type="text"] {
border: 2px solid #2196F3;
padding: 8px;
}
input[type="checkbox"] {
transform: scale(1.5); /* 放大复选框 */
}
/* 3. [attr~="value"] → 包含独立单词 */
[class~="warning"] {
background-color: #fff3cd;
padding: 12px;
border-left: 5px solid #ffc107;
}
/* 4. [attr|="value"] → 以 value- 开头（常用于语言代码） */
[lang|="zh"] {
font-family: "Microsoft YaHei", sans-serif;
color: #2e7d32;
}
/* 5. [attr^="value"] → 以 value 开头 */
a[href^="https://"] {
background: url('https://img.icons8.com/color/16/000000/external-link.png') no-repeat right center;
padding-right: 20px;
}
/* 6. [attr$="value"] → 以 value 结尾 */
a[href$=".pdf"]::after {
content: " [PDF]";
color: #d32f2f;
font-size: 0.9em;
}
img[src$=".webp"] {
border: 3px solid #9c27b0;
}
/* 7. [attr*="value"] → 任意位置包含 */
[title*="登录"] {
background-color: #e8f5e9;
border: 2px dashed #4caf50;
}
/* 常用 data-* 属性组合写法 */
[data-status="success"] {
color: #4caf50;
}
[data-status="error"] {
color: #f44336;
}
</style>
</head>
<body>
<h3>属性选择器实战演示</h3>
<p lang="zh-CN">这是中文段落（lang|="zh" 生效）</p>
<p lang="en">This is English paragraph</p>
<a href="https://example.com" target="_blank">外部链接（target + https:// 前缀）</a><br>
<a href="/files/guide.pdf">下载 PDF 文件（以 .pdf 结尾）</a><br>
<a href="http://internal.com/page">内部链接</a>
<input type="text" placeholder="普通文本框"><br>
<input type="checkbox" checked> 复选框（放大 1.5 倍）
<div class="alert warning important">这是一个警告框（class~="warning"）</div>
<img src="photo.webp" alt="示例图片">（.webp 结尾有紫色边框）
<button title="点击登录系统">登录</button>（title 含“登录”有绿色虚线框）
<div data-status="success">操作成功！</div>
<div data-status="error">出错了...</div>
</body>
</html>
三、常见高频使用场景总结（面试+实战）
- 表单元素区分：
input[type="text"]、input[type="radio"]、input[type="file"]… - 链接类型区分：外链
[href^="http"]、PDF 文件[href$=".pdf"]、图片格式[src$=".avif"] - data-* 属性状态：
[data-theme="dark"]、[data-loading="true"]、[data-type="modal"] - 国际化：
[lang|="en"]、[lang|="zh"] - 图标/文件类型标记：文件后缀、协议类型
- 无障碍相关：
[aria-hidden="true"]、[aria-invalid="true"] - 第三方组件 hook：很多 UI 库会用
data-*属性做样式钩子
四、小技巧 & 注意点
- 属性选择器特异性 = 0,1,0（相当于 class）
[attr val]和[attr="val"]不要写错引号（推荐始终加引号）- 值中包含特殊字符时必须加引号：
[data-info="it's ok"] - 大小写敏感：HTML 属性值在 HTML5 中通常不区分大小写，但 CSS 属性选择器区分大小写（除非用
i标志） - CSS4 新增不区分大小写写法（目前支持度一般）：
[attr="val" i]
/* 示例：不区分大小写匹配（部分浏览器支持） */
[class*="btn" i] { ... }
今天的笔记就到这里～
下一期预告：伪类与伪元素（上），重点讲常用结构伪类和交互伪类。
有疑问欢迎留言，有想深入的场景也可以提～ 祝大家 CSS 越写越丝滑！🚀
