最直接有效的方式是使用CSS属性选择器精准匹配特定属性值：基础语法[attr]匹配存在该属性的元素；[attr="value"]精确匹配完全一致的值；[attr^="val"]、[attr$="val"]、[attr*="val"]分别匹配前缀、后缀、包含关键词的值；添加i标志可忽略大小写。
当元素的某个属性值不同时需要应用不同样式，最直接有效的方式就是使用CSS属性选择器（Attribute Selector）精准匹配特定属性值。
基础属性选择器：匹配存在某属性的元素
用 [attr] 语法可选中所有带有该属性的元素，不管值是什么。比如：
[data-theme] { background: #f5f5f5; } —— 所有含 data-theme 属性的元素都加浅灰背景。
精确匹配：= 操作符锁定具体值
用 [attr="value"] 可严格匹配完全一致的属性值。常见于状态类、类型标识等场景：
立即学习“前端免费学习笔记（深入）”；
- [type="submit"] { background: #007bff; } —— 只给提交按钮设蓝色背景
- [data-status="error"] { color: #dc3545; border-left: 4px solid #dc3545; } —— 错误状态提示高亮左边界
部分匹配：^=、$=、*= 处理常见变体
面对带前缀、后缀或包含关键词的属性值，可用以下操作符灵活应对：
-
[class^="btn-"] —— 匹配 class 以 btn- 开头的元素（如
btn-primary、btn-outline） - [href$=".pdf"] —— 匹配所有 PDF 链接，自动加下载图标
- [alt*="logo"] —— 匹配 alt 文本中含 logo 的图片，统一设置尺寸或边框
忽略大小写：添加 i 标志增强兼容性
HTML 属性值不区分大小写，但CSS默认区分。加 i（如 [attr="val" i]）可让匹配更鲁棒：
[data-role="header" i] { font-size: 1.5rem; font-weight: bold; } —— 同时匹配 data-role="Header"、data-role="HEADER" 等写法。
