style属性仅对可渲染元素生效，如<div><p><span><h1>等；写在<html><head><meta><link>等元信息标签上无效，浏览器直接忽略。
style属性写在了不该写的标签上
只有可渲染的 HTML 元素才支持 style 属性，比如 <div>、<p>、<span>、<h1>；<html>、<head>、<meta>、<link> 这类元信息标签加了也完全无效，浏览器直接忽略。
常见误用：<html style="font-family: sans-serif"> 看似合理，但 <html> 本身不参与视觉渲染，字体不会继承下去；真正该设的地方是 <body> 或根级容器元素。
-
<body>是设置全局默认样式的合理起点，比如font-size、line-height、color - 想影响整个页面字体？用
<body style="font-family: 'Segoe UI', sans-serif">，别往<html>上硬套 - 动态 JS 注入时注意：若把
style插到<head>外或注释块里，也会静默失效
style值语法错误或格式不合法
style 的值是 CSS 声明块，但必须是单行、分号分隔、冒号后带空格、单位不能省略——任何格式偏差都会导致整条声明被丢弃。
例如：style="color: red font-size: 14px" 缺少分号，浏览器只认前半截 color: red，后面全失效；style="width: 100" 没单位，等同于无效。
立即学习“前端免费学习笔记（深入）”；
- 所有属性值中含空格的（如字体名），必须用英文双引号包裹：
font-family: "Helvetica Neue"→style="font-family: "Helvetica Neue"" - 最后一个声明末尾的分号可省，但建议统一加上，避免后续追加时漏写
- 不要换行或缩进：
style="color: red; font-size: 14px"在部分旧环境可能解析失败
style和class冲突时谁生效？
内联 style 属性的特异性（specificity）永远高于外部或内部 class 规则，除非后者用了 !important。这不是“不生效”，而是被更高优先级覆盖了。
比如：<div class="box" style="color: green">文字</div> + .box { color: red; } → 最终是绿色。
- 检查开发者工具 Elements 面板，右侧 Styles 中看哪些属性被划掉（strikethrough），点开就能看到来源是
element.style还是某个.box规则 - 若想让 class 生效，删掉
style属性；若需动态控制，改用className切换预设 class，而非拼接style字符串 - JS 中通过
elem.style.color = 'blue'设置，注意驼峰命名（background-color→backgroundColor）
父元素隐藏导致子元素style“看起来”没效果
display: none 会让子元素彻底脱离渲染树，此时哪怕子元素有 style="color: red"，它也不会显示——不是样式没加载，而是元素根本没参与布局和绘制。
对比 visibility: hidden：子元素仍占位、仍可被 JS 访问（如 offsetHeight），只是不可见；而 display: none 下，offsetHeight 为 0，getComputedStyle 也取不到颜色值。
- 调试时先确认目标元素是否在 DOM 中可见：右键检查元素 → 查看 Computed 面板里的
display和visibility - 别用
visibility: hidden做弹窗隐藏，tab 键仍能聚焦、屏幕阅读器仍可读取；真要隐藏交互区域，请用display: none+aria-hidden="true" - Flex/Grid 容器设了
display: none，子项所有style都无意义——先确保父容器是渲染态
style 被写在了 <head> 或 <html> 上，或者路径/语法肉眼难辨的空格和分号问题。这些地方没有报错，也不提示，只能靠开发者工具逐层点开验证。 
