style属性仅支持内联声明块，不支持选择器、媒体查询或伪类；其特异性为1000，优先级最高，会覆盖外部CSS及!important；而<style>标签支持完整CSS语法但无作用域隔离。
style属性只能写内联样式，不能用选择器
HTML元素的 style 属性只接受「声明块」，也就是 property: value; 这种形式，中间不能出现选择器、媒体查询或伪类。比如 <div style="color: red; font-size: 14px;"> 是合法的；但写成 <div style=".box { color: red; }"> 或 <div style=":hover { color: blue; }"> 完全无效，浏览器会直接忽略整条声明。
常见错误是把 CSS 文件里的写法直接塞进 style，结果样式不生效却查不出原因。它本质是给单个元素“硬编码”样式，没有复用性，也不支持级联和继承的完整机制。
内联样式优先级最高，会覆盖外部CSS和<style>标签
当同一个属性在多个地方定义时，style 属性的权重高于外部 CSS 文件、<style> 标签甚至 !important（除非后者也出现在 style 中）。这不是 bug，而是 CSS 层叠规则明确规定的：内联样式的特异性值为 1000，远超 ID 选择器的 100。
这意味着：
立即学习“前端免费学习笔记（深入）”；
- 动态设置
style.color = "red"会立刻压过.btn { color: blue !important; } - 用 JavaScript 修改
element.style.width后，即使删掉该行 JS，宽度也不会自动恢复——因为style属性本身还留着空字符串或旧值 - 调试时在 DevTools 的 Styles 面板看到带「inline」标记的样式，就是它在起作用
<style>标签里能写完整CSS，但作用域默认是全局
<style> 标签放在 <head> 或 <body> 中都可以，内容会被当作标准 CSS 解析：支持选择器、伪类、@规则（如 @media）、变量（--main-color），也能被后续样式覆盖。
要注意的点：
- 没有自动作用域隔离，
<style>.header { margin: 0; }</style>会影响页面所有.header元素，不管它在哪 - 若想局部化，得配合属性选择器或自定义属性，比如
[data-section="home"] .title { font-size: 2rem; } - 重复插入
<style>标签不会报错，但每一份都会参与层叠计算，容易引发意料外的覆盖
什么时候该用style属性，什么时候用<style>标签
选 style 属性，仅限以下场景：
- JS 动态控制单个元素的样式，比如
el.style.transform = `translateX(${x}px)` - 服务端渲染时根据状态注入一次性样式（如邮件模板中禁用外部资源）
- 调试临时覆盖，比打开 DevTools 改更快
选 <style> 标签，适合：
- 组件级样式但不想引入构建工具（如一个独立 HTML 页面配专属样式）
- 需要媒体查询响应式布局，又不希望加载额外 CSS 文件
- 用 CSS 变量做主题切换，且变量只在此页生效
真正麻烦的是混合使用：比如先用 <style> 设了 .card { width: 300px; }，又在某个 <div class="card" style="width: 200px;"> 上硬写宽度——这时候得盯紧层叠顺序，否则改一处，其他地方跟着偏移。这种耦合一旦变多，就很难靠肉眼理清最终效果从哪来。
