真正能影响css表现的全局属性只有class、id、style；class通过类选择器匹配，id通过id选择器匹配且唯一，style以内联方式直接定义样式并具有最高优先级。
HTML全局属性和CSS样式不是同一类东西，不能混用；class、id、style 是少数能同时影响HTML结构和CSS行为的桥梁属性，其余全局属性（如 title、data-）不直接参与样式渲染。
哪些HTML全局属性能真正影响CSS表现
绝大多数HTML全局属性（如 hidden、contenteditable、draggable）只改变元素行为或语义，不触发CSS规则。真正能被CSS“看见”并响应的只有三类：
-
class：CSS通过.xxx选择器匹配，支持多值空格分隔，可复用 -
id：CSS通过#xxx选择器匹配，页面内必须唯一，优先级高于class -
style：内联样式，直接写CSS声明，如style="color: red; margin: 0"，优先级最高
其他如 title、tabindex、lang 等，即使存在，CSS也无法基于它们写选择器（除非配合属性选择器，如 [title]，但这是另一回事）。
class 和 id 在CSS中到底怎么用才不出错
常见错误是把 id 当成普通标识反复用，或给 class 起名太随意导致冲突：
- 一个页面里出现两个相同
id="header"，CSS#header只会命中第一个，JSdocument.getElementById也只返回第一个 -
class名含数字开头（如class="1col"）会导致CSS规则无效，因为类选择器不接受数字开头 - 多个
class值之间必须用空格，不是点号：class="btn btn-primary active"✅，class="btn.btn-primary"❌（后者是HTML语法错误） - CSS中多个class组合选择器（如
.card .title）表示后代关系，而.card.title（无空格）才表示同时拥有两个class的元素
style 属性和外部CSS文件谁该优先用
内联 style 看似方便，但实际项目中应严格限制使用场景：
- 仅用于动态生成的样式（如JS根据数据计算出的
width或transform） - 临时调试时加一两条，改完立刻移走
- 绝对不要在HTML模板里写大量
style="..."，它无法复用、无法缓存、无法用媒体查询覆盖 - 外部CSS（
<link rel="stylesheet" href="main.css">）才是正解：浏览器可缓存、支持压缩、便于主题切换
注意路径问题：href 值必须是相对或绝对URL，href="css/main.css" 和 href="/css/main.css" 行为完全不同——前者相对于当前HTML路径，后者从域名根目录开始找。
为什么 data- 属性不能直接当样式用，但有时又看到它被CSS用了
data- 是纯语义型全局属性，本身不触发任何样式。但它能被CSS属性选择器读取：
<button data-status="loading">提交</button>- CSS里写
button[data-status="loading"] { opacity: 0.6; cursor: not-allowed; }就能生效 - 这种写法合法，但性能略低于class——浏览器需遍历所有匹配元素检查属性值
- 别滥用：状态变化频繁时（比如每秒更新的加载进度），用class切换更稳定，
data-更适合静态元信息（如data-id="123"）
真正容易被忽略的是：CSS属性选择器对大小写敏感，data-status="Loading" 和 [data-status="loading"] 不匹配；而 class 名本身不区分大小写，但惯例全小写。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
