能被css选择器直接匹配的html全局属性只有class、id、lang、dir、contenteditable和draggable；其中class和id是高频主力，lang和dir用于多语言站点，contenteditable和draggable需用属性选择器显式调用。
全局属性本身不直接参与样式渲染，但和CSS选择器配合时，能显著提升样式控制的灵活性与语义准确性——关键在于别把它当“装饰”，而要当作可编程的选择依据。
哪些HTML全局属性能被CSS选择器直接匹配
CSS无法通过title、data-*（除非显式用属性选择器）、hidden（它本身会触发display: none，但不是靠选择器生效）等全局属性自动应用样式。真正能被原生选择的只有：class、id、lang、dir、contenteditable（需加[contenteditable]）、draggable（同理）。其中class和id是高频主力，lang和dir在多语言站点中特别实用。
-
lang可用于切换字体或行高：[lang="zh"] { font-family: "PingFang SC", sans-serif; } -
dir="rtl"配合[dir="rtl"]可统一翻转表单控件布局，比硬写text-align: right更可靠 -
contenteditable状态可用来禁用默认焦点样式：[contenteditable="true"]:focus { outline: 2px solid #007bff; }
class选择器不是字符串匹配，而是空格分隔的单词匹配
这是最常踩的坑：写.btn-primary却对class="btn-primary-large"或class="my-btn-primary"失效，因为CSS类选择器只匹配**独立单词**，不是子串。浏览器解析class属性时，会按空格切分成词元列表，然后逐个比对。
- ✅ 正确：
<button class="btn btn--primary"></button>+.btn.btn--primary { ... } - ❌ 错误：
<div class="btn-primary"></div>+.btn-primary { ... }在需要区分变体时极易失控 - ⚠️ 性能注意：
[class*="btn"]会强制遍历所有元素的class属性字符串，比.btn慢一个数量级，仅限调试临时用
id选择器权重过高，且破坏组件复用性
#header这类ID选择器虽然精准，但一旦页面中出现多个相同逻辑模块（比如多个卡片组件），就无法复用样式；同时它的高特异性会让后续覆盖变得困难，比如#nav .item几乎无法被.nav-item.active安全覆盖。
- 优先用
class替代id做样式控制，哪怕结构上“唯一”也建议加语义化类名，如class="site-header" - 如果必须用
id（如锚点跳转），确保它不参与样式定义；样式全交给class管理 -
id在JavaScript中仍有不可替代性（document.getElementById），但CSS里尽量回避
data-*属性必须用属性选择器显式调用
data-开头的自定义全局属性不会自动触发任何样式，必须搭配[data-xxx]或[data-xxx="value"]才能生效。它适合标记状态或环境，比如暗色模式开关、加载状态、A/B测试分组。
- 示例：
<article data-status="draft" data-category="tech">...</article>→[data-status="draft"] { opacity: 0.6; } - 避免写
[data-category~="tech"]（~=`匹配空格分隔值），除非你真用了多值，如data-category="tech web" -
data-属性名区分大小写，data-theme="dark"和[data-theme="DARK"]不匹配
真正难的不是写对选择器，而是判断该用哪个属性承载信息：语义化结构用class，运行时状态用data-，语言方向用lang/dir——选错载体，后面所有样式都会绕弯子。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
