[data-star]仅检测属性存在性，不校验值内容；精确匹配需用[data-star="4"]且值须严格一致；~、*等模糊匹配不适用于单值data-star；js修改属性后css不重匹配，需配合class或css变量实现动态响应。
data-star 属性必须写成 [data-star] 才能匹配存在该属性的元素
只要 HTML 元素带 data-star 属性，不管值是什么（包括空字符串、"0"、"5" 甚至 "★"），[data-star] 都能选中。它只检查属性是否存在，不关心值内容。
常见错误是写成 [data-star=5] —— 这种裸等号写法在遇到数字开头、空格或特殊字符时会解析失败；更糟的是，它在部分浏览器里根本不会匹配 data-star="5"，因为未加引号的 5 被当作 CSS 标识符处理，而标识符不能纯数字开头。
- ✅ 正确：
[data-star]、[data-star="5"]、[data-star="★"] - ❌ 错误：
[data-star=5]、[data-star=★]、[data-star=" 5 "]（值含首尾空格）
精确匹配 data-star="4" 必须确保 HTML 值一字不差
[data-star="4"] 是唯一真正“等于 4”的写法，但它对空格、大小写、不可见字符零容忍。哪怕后端模板输出 data-star="4 "（末尾多一个空格），这个选择器就完全失效。
- 服务端或 JS 设置时务必
el.setAttribute('data-star', String(rating).trim()) - 避免模板拼接：
data-star="{{ rating }}"若rating是字符串且含空格，直接污染值 - 浏览器开发者工具里右键「Edit as HTML」，肉眼确认引号内是否真为
"4"，而非"4 "或全角空格
[data-star~="4"] 不适用于 data-star，除非你把它当空格分隔列表用
~=" 是专为 class、rel 这类语义上“多值空格分隔”的属性设计的。如果你硬把 data-star 写成 data-star="4 5"，再用 [data-star~="4"]，它确实能命中——但这违背了 data-star 表达单个评分值的本意。
更现实的风险是：一旦有人往 data-star 里塞 "4-5" 或 "star-4"，[data-star*="4"] 就会误中，而 [data-star~="4"] 又完全不中——这种模糊性不是 bug，是设计使然。
- 别为了“看起来能匹配”而扭曲数据结构
- 如果真要支持多值，改用
data-stars="4 5"并明确文档约定 - 单值场景下，
~、^、$、*全部属于过度设计
动态修改 data-star 后，CSS 不会自动重匹配
JS 执行 el.setAttribute('data-star', '5') 后，已渲染的样式不会更新。CSS 属性选择器只在 DOM 节点创建时匹配一次，不监听后续属性变更。
这意味着：[data-star="4"] { color: orange; } 和 [data-star="5"] { color: gold; } 这类规则，只有在元素初始插入 DOM 时才生效。后期 JS 改值，颜色不会变。
- 要实现视觉响应，得配合 class 切换：
el.classList.toggle('is-rated-5', rating === 5) - 或用 CSS 自定义属性 + JS 同步：
el.style.setProperty('--star-rating', rating)，再在 CSS 中用color: hsl(calc(var(--star-rating) * 20), 80%, 60%); - 不要指望
[data-star]成为响应式开关——它是静态快照，不是 reactive binding
真实难点不在语法，而在值本身：BOM、零宽空格、全角数字、前后不可见符，CSS 选择器对此完全无感。这类问题只能靠 JS 清洗或服务端规范输出，写再多 [data-star="4"] 也救不了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
