属性选择器可精准控制样式，无需修改html；支持存在匹配、精确匹配、前缀/后缀/包含匹配，并兼容大小写与多条件组合。
直接用属性选择器就能按属性值精准控制样式，不用改HTML加class或id，干净又灵活。
匹配存在某属性的元素
只要元素带这个属性，不管值是什么，都能选中。适合统一处理有某种特征的元素。
-
[title]给所有含 title 属性的元素加提示边框 -
a[href]去掉所有超链接的下划线：a[href] { text-decoration: none; } -
[data-status]为所有带 data-status 的组件设默认背景色
精确匹配完全一致的属性值
用等号 = 锁定唯一值，最常用在表单控件、状态标识等场景。
-
input[type="text"]单独给文本框加浅灰边框 -
button[type="submit"]设置提交按钮的绿色背景和白色文字 -
[data-role="header"]仅作用于 role 值严格等于 header 的元素
按前缀、后缀或包含关系匹配
应对属性值不固定但有规律的情况，比如 class 命名、文件类型、URL 特征。
-
[class^="btn-"]匹配class="btn-primary"或class="btn-outline" -
a[href$=".pdf"]给 PDF 链接加下载图标或特殊颜色 -
[src*="logo"]找出所有 src 含 logo 的图片，统一设宽高 -
[href^="https://"]标识外部 HTTPS 链接，加外部图标
大小写兼容与多条件组合
HTML 属性值不区分大小写，但 CSS 默认区分；多个条件可连写提升精度。
- 加
i标志忽略大小写：[data-theme="dark" i]同时匹配 dark / DARK / Dark - 组合多个属性：
input[required][type="email"]只选必填的邮箱输入框 - 结合伪类增强交互：
input[type="checkbox"]:checked控制勾选状态样式
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
