New Chat
Ctrl
K
Chat History
Mobile App

CSS 属性选择器实战示例

css 属性选择器各种示例
下面一次性给出「能覆盖 90 % 实战场景」的 30 个 CSS 属性选择器示例，并把它们按「语法 → 效果 → 使用场景」三栏排版，复制即可跑通。
（所有例子都用同一个 HTML 片段，方便你对照看结果）
HTML
Preview
Copy
<!-- 公共测试片段 -->
<input type="text" placeholder="用户名">
<input type="password" placeholder="密码">
<input type="email" placeholder="邮箱" required>
<input type="search" placeholder="搜索">
<button disabled>禁用按钮</button>
<a href="/assets/logo.png">PNG 图标</a>
<a href="https://example.com" target="_blank" rel="noopener">外链</a>
<a href="mailto:[email protected]">发邮件</a>
<a href="xx.zip">下载 zip</a>
<div class="box box--primary box-lg">Box</div>
<div data-user="bob" data-level="3">Bob</div>
<div data-user="alice" data-level="5">Alice</div>

1. 完全匹配 [attr="value"]

css
Copy
/* 语法 → 效果 → 场景 */
[type="password"]{border:1px solid red;}
/* 只选中 type 恰好是 password 的 input */

2. 空白分隔的单词匹配 [attr~="value"]

css
Copy
[class~="box--primary"]{background:#0366d6;color:#fff;}
/* 选中 class 列表里含有独立单词 box--primary 的元素 */

3. 开头单词匹配 [attr|="value"]

css
Copy
[class|="box"]{border-radius:4px;}
/* 选中 class 以 box 开头且后面是 - 或正好等于 box 的元素 */

4. 前缀匹配 [attr^="value"]

css
Copy
a[href^="mailto:"]::before{content:"📧";}
/* 所有 mailto 链接前加邮件图标 */

5. 后缀匹配 [attr$="value"]

css
Copy
a[href$=".zip"]::after{content:"⬇";}
/* 下载 zip 的链接后加下载图标 */

6. 子串匹配 [attr*="value"]

css
Copy
a[href*="example"]{color:tomato;}
/* 只要 href 里出现 example 就变色 */

7. 忽略大小写的标志 i

css
Copy
a[href$=".ZIP" i]{font-weight:bold;}
/* .zip/.ZIP/.Zip 都能匹配（大小写不敏感） */

8. 多属性组合

css
Copy
a[target="_blank"][rel~="noopener"]{text-decoration:underline;}
/* 同时满足 target=_blank 且 rel 列表里含 noopener 才下划线 */

9. 存在即选中 [attr]

css
Copy
[disabled]{cursor:not-allowed;opacity:.6;}
/* 只要有 disabled 属性就选上，不管值是什么 */

10. 占位符选择器（非属性选择器，但常一起用）

css
Copy
input::placeholder{color:#999;}
/* 额外赠送，常与属性选择器搭配 */

11-30. 速查表（一句话说明）

Table
Copy
#选择器一句话说明
11input[required]必填项红框
12[data-level="5"]等级 5 用户
13[data-user*="bob"]用户名含 bob
14[data-user^="a"]用户名首字母 a
15[data-user$="e"]用户名结尾是 e
16[class*="lg"]class 含 lg（大屏）
17[type="email"]:invalid邮箱格式错误时变红
18`[hreflang="en"]`语言代码 en 或 en-US
19[rel~="nofollow"]含 nofollow 的链接
20[srcset*="2x"]高清图高亮
21[type="checkbox"]:checked复选框选中态
22[aria-expanded="true"]展开状态
23[role="button"][tabindex]自定义按钮可聚焦
24[data-tooltip]:hover::after悬浮显示提示
25[autoplay]有自动播放的媒体
26[controls]有控制条的音视频
27[loop]循环播放
28[download]有 download 属性的链接
29[contenteditable="true"]:focus富文本编辑框聚焦
30[loading="lazy"]懒加载图片

实战技巧小结

  1. 能不用 !important 就别用 —— 属性选择器本身已足够精确。
  2. 组合伪类/伪元素威力翻倍，如 [type="checkbox"]:checked + label。
  3. 在生产环境记得加 i 标志避免大小写坑。
  4. 对自定义数据属性 data-* 用属性选择器，比多写 class 更语义化。
复制粘贴即可跑，祝你编码愉快！