HTML属性（如class、id）本身不继承，仅CSS中特定属性（如color、font-family）可继承；继承非复制粘贴，而是浏览器默认行为，与样式来源无关。
HTML 属性继承到底继承什么
继承不是“复制粘贴”父元素所有属性，而是浏览器对特定 CSS 属性（仅限 CSS）做的默认向下传递行为；HTML 属性（如 id、class、data-* 、disabled）本身完全不继承。
常见误解是看到子标签用了父级的字体颜色或行高，就以为“class 传下去了”，其实只是 CSS 的 color、line-height 这些属性天生可继承，而 class 是 HTML 属性，压根不参与继承机制。
-
class、id、name、data-id等纯 HTML 属性：子元素不会自动获得，必须显式写上 - 可继承的 CSS 属性：如
font-family、color、text-align、visibility（注意：display不继承） - 不可继承的 CSS 属性：如
width、height、margin、padding、border，即使父元素设了，子元素也按默认值（通常是auto或0）计算
为什么 style 里写的属性有的生效、有的没反应
因为是否生效，取决于该 CSS 属性是否在浏览器继承列表中——和你写在哪（style、class 还是外部 CSS）无关，只和属性名本身有关。
比如给 <div style="color: red; border: 1px solid blue;"><p>test</p></div>，<p> 会变红，但边框不会出现。这不是 bug，是规范行为。
立即学习“前端免费学习笔记（深入）”；
- 查继承性最快方式：MDN 上搜 CSS 属性名，看 “Inherited” 一栏是否标 “yes”
- 想强制让不可继承属性“透下去”？不行——但可以用 CSS 变量 +
inherit模拟，例如：div { --main-bg: #eee; } p { background-color: var(--main-bg); } - 别依赖继承来控制布局类属性（
margin、flex相关等），它们不继承，写了也白写
class 和 id 看似“传下来”其实是假象
你在父元素上加了 class="btn"，子元素没写 class 却样式变了？那是因为 CSS 选择器匹配到了子元素，比如 .btn span 或 .btn > * 这类规则，不是 class 继承了。
真实验证方法：删掉父元素的 class，子元素如果还带样式，说明是全局规则或更宽泛的选择器在起作用；如果样式消失，大概率是靠父类名“锚定”的后代选择器。
- 父子之间没有隐式 class 传递，
<ul class="nav"><li>Item</li></ul>中的<li>并不拥有nav这个 class - JS 里用
el.classList查子元素，永远拿不到父元素的 class 列表 - 想让子元素“带”父级语义？用
data-属性手动透传，比如<ul data-role="nav"><li data-role="nav-item"></li></ul>
容易被忽略的继承边界：伪元素和替换元素
继承不是无条件穿透所有节点。两个典型例外：伪元素（::before/::after）默认继承父元素的可继承属性，但像 content 这种专属属性不能被继承；而 <img>、<input> 这类替换元素（replaced elements），很多文本类继承属性（如 font-size）虽能继承，但实际渲染可能被自身 UA 样式覆盖。
-
<button style="font-size: 20px;"><span>click</span></button>中<span>会继承font-size，但按钮内部文字大小可能被浏览器默认buttonUA 样式重置 - 用
getComputedStyle(el).fontSize查到的值，未必等于最终渲染效果，尤其在表单控件里 - 调试时别只看 DevTools 的 “Computed” 面板，要点开 “Inherited from” 展开链，确认到底是哪一层传下来的
事情说清了就结束。继承机制简单，但混淆 HTML 属性和 CSS 属性、忽略替换元素的 UA 干预、误判选择器作用范围，这三处最容易反复踩坑。
