属性选择器需用方括号[]包裹属性名或带值表达式，如[data-theme]匹配所有含该属性元素，[data-theme="dark"]仅匹配值精确为"dark"的元素；属性名不加引号，值必须加引号；html属性默认不区分大小写，建议加i标志；input[type="..."]是最稳定常用场景；前后缀匹配如[href^="https"]易误匹配，推荐[href^="http"]或[src*=".png"]；[class~="active"]匹配class中独立单词，[lang|="zh"]匹配语言代码前缀。
属性选择器怎么写才有效
直接用方括号 [] 包住属性名或带值的表达式，浏览器就能识别——不需要额外声明、也不依赖 class 或 id。关键在于匹配逻辑是否贴合真实 HTML 结构。
比如 [data-theme] 会选中所有带 data-theme 属性的元素，不管它的值是 "dark" 还是 "light"；而 [data-theme="dark"] 只匹配值完全等于 "dark" 的那几个。
- 属性名不加引号（
[type]正确，["type"]是无效语法） - 属性值在
=后必须加引号（[type="text"]，不能写成[type=text]，否则遇到特殊字符或空格会出错） - HTML 属性默认不区分大小写，但建议显式加
i标志：[type="TEXT" i]，避免意外漏选
表单控件样式统一用 input[type="..."]
这是属性选择器最稳定、最常用的场景。比起给每个输入框加 class，直接按 type 控制更干净，也天然兼容未来新增的字段。
常见组合：
-
input[type="text"], input[type="email"], input[type="search"]：统一线宽、圆角、字体大小 -
input[type="checkbox"], input[type="radio"]：重置默认外观，再用伪元素自定义 -
button[type="submit"], button[type="reset"]：区分操作按钮语义，设置不同背景色和 hover 行为
注意：input[type="number"] 在 Safari 中默认有上下微调箭头，需用 appearance: none + 自定义样式清除，否则视觉不一致。
[href^="https"] 和 [src$=".png"] 这类前后缀匹配容易踩坑
它们看起来直观，但实际匹配的是整个属性值字符串——不是文件名，也不是协议部分。
例如：a[href^="https"] 能匹配 href="https://example.com"，但也会匹配 href="https-internal://api"（如果真有这种非标协议）；img[src$=".png"] 在 src="icon.png?v=123" 下会失效，因为完整值以 "123" 结尾。
- 对外链加图标或新窗口提示，优先用
[href^="http"]更稳妥（覆盖 http/https） - 匹配文件扩展名，推荐用
[src*=".png"]或配合data-type属性做语义标注，比纯字符串匹配更可控 -
[href$="/"]想匹配目录页？小心href="https://site.com/"会被选中，但href="/about/"也会——路径前缀不同，结果却一样
[class~="active"] 和 [lang|="zh"] 这两个冷门但关键
它们解决的是「多值属性中精确单词匹配」和「语言代码前缀匹配」这两类典型问题，普通 * 或 ^ 做不到。
[class~="active"] 等价于「这个元素的 class 属性里，有一个独立单词是 active」，所以 class="nav active dropdown" 能命中，但 class="is-active" 不行（中间是短横线，不是空格）。
[lang|="zh"] 主要用于多语言切换：lang="zh"、lang="zh-CN"、lang="zh-TW" 全部匹配，但 lang="zho" 或 lang="en-zh" 不会误触。
这两个选择器的使用频率不高，但一旦需要，就很难被其他方式替代——尤其是处理第三方组件输出的 class 或服务端注入的 lang 属性时，它们是唯一可靠的选择。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
