html中无priority属性，应使用data-priority等自定义属性标记优先级；它合法、可被js和css选择器精确匹配，且语义清晰、便于维护与扩展。
HTML里没有priority或level属性来标灵感便签优先级
浏览器根本不认识priority="high"这种写法，加了也白加，DOM里照常渲染，CSS也选不到——因为这不是标准属性。真要区分高/中/低，得靠你自己定义语义化方式，比如用data-priority或类名。
用data-属性标记优先级最稳妥
data-是HTML5明确定义的自定义属性机制，既合法又不会干扰渲染，还能被JS读取、被CSS用属性选择器匹配。
<div data-priority="high">紧急点子</div><div data-priority="medium">待验证想法</div><div data-priority="low">长期脑洞</div>
CSS可以这样写样式：
div[data-priority="high"] { border-left: 4px solid #e74c3c; }<br>div[data-priority="medium"] { border-left: 4px solid #f39c12; }<br>div[data-priority="low"] { border-left: 4px solid #95a5a6; }
别用class="high"这类纯语义类名直接表示优先级
看着省事，但容易和功能类名冲突，比如class="high"可能被其他组件当成“高度相关”或“高亮状态”，后期维护时根本分不清是视觉样式还是业务含义。
- ✅ 推荐：
class="note note--priority-high"（BEM式，明确作用域） - ❌ 避免：
class="high"或class="priority-high"（无上下文，易歧义） - ⚠️ 注意：
class不能被querySelector按值精确筛选，而data-priority="high"可以：document.querySelectorAll('[data-priority="high"]')
如果要用JS动态控制优先级，别忘了同步更新DOM和样式逻辑
用户点击“升为高优”按钮后，光改data-priority还不够——得确保对应CSS规则已加载，且没被更宽泛的选择器覆盖。
- 检查是否漏写了
[data-priority]通配样式（比如默认灰色边框），否则新设的high可能没对比度 - 避免用
!important硬覆盖，优先用更具体的选择器，比如article .note[data-priority="high"] - 若用框架（如React/Vue），确保
data-priority是响应式绑定的，不是静态字符串
真实场景里，优先级常要联动排序、过滤或导出逻辑，data-priority比纯class更容易统一处理——毕竟它本质是数据，不是装饰。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
