style属性只对可渲染的视觉元素生效，如<div>、<p>、<span>等；元信息标签（<head>、<meta>）及<html>标签上使用无效。
style属性写在哪个标签里才生效
只有支持内联样式的 HTML 元素才能用 style 属性，不是所有标签都认它。比如 <div>、<p>、<span>、<h1> 这类「内容型」元素可以；但 <head>、<meta>、<link> 这些元信息标签加了也无效，浏览器直接忽略。
常见错误现象：<html style="color: red"> 看起来写了，但实际不控制任何文本颜色——因为 color 不继承到子元素，且 <html> 本身不渲染可见内容。
- 只对「可渲染的、有视觉表现的」元素使用
style - 避免在语义化结构标签（如
<article>、<section>）上滥用，它们更适合用 class 配合 CSS - 如果想全局控制字体或重置样式，
<body>是更合理的选择起点
style值怎么写才被正确解析
style 的值是 CSS 声明块，但必须写成一行、用分号分隔、不能换行或缩进，也不能漏掉分号（最后一个可省略，但建议统一加上）。
常见错误现象：style="color: red; font-size: 14px" 没问题；但 style="color: red font-size: 14px"（缺分号）会导致整个声明失效；style="color: red; background-color: #fff;" 中若写成 background-color: #fff（末尾多空格+分号）一般不影响，但某些老版 IE 可能报错。
立即学习“前端免费学习笔记（深入）”；
- 每个声明必须是
属性: 值格式，冒号后建议留一个空格 - 值中含空格时要用引号包裹，比如
font-family: "Helvetica Neue"→ 必须写成style="font-family: "Helvetica Neue"" - 百分比、像素等单位不能省略（
width: 100无效，得写width: 100%或width: 100px）
JavaScript 动态设置 style 的坑
用 JS 改 style 属性时，本质是操作 DOM 元素的 style 对象，但注意：它只反映内联样式，不读取 CSS 文件或 <style> 块里的规则。
常见错误现象：elem.style.color 取不到通过 class 设置的颜色；elem.style.setProperty('color', 'blue') 会报错——因为 setProperty 是 CSSStyleDeclaration 方法，不是元素对象的方法。
- 读取当前计算样式请用
getComputedStyle(elem).color，不是elem.style.color - 设置单个样式推荐直接赋值：
elem.style.backgroundColor = '#eee'（注意驼峰命名，background-color→backgroundColor） - 批量设置建议用
elem.setAttribute('style', '...')，避免反复触发重排
内联样式和 CSS 优先级冲突怎么办
内联样式优先级高于外部样式表和 <style> 块，但低于 !important 声明（除非它自己也带 !important）。这导致调试时容易误判来源。
常见错误现象：明明写了 div { color: blue !important }，但元素还是红色——检查发现 HTML 里写了 style="color: red !important"，此时后者胜出。
- 不要在内联样式里滥用
!important，它会让后续维护几乎无法覆盖 - 用浏览器开发者工具看「Styles」面板时，带「inline」标识的就是
style属性值，优先级数值为 1000 - 如果必须覆盖内联样式，JS 中可设为空字符串：
elem.style.color = ''，再让 CSS 规则生效
真正麻烦的不是怎么写 style，而是改完之后不知道它到底有没有被应用——浏览器不会报错，只会静默失败。所以每次加完，务必打开开发者工具，盯着「Computed」标签页看真实生效的值。
