CSS 继承演示
GPT plus 代充 只需 145/* 根元素设置 → 几乎全站生效 */
:root, html
body {
max-width: 900px;
margin: 2rem auto;
padding: 1rem;
background: #f8f9fa; /* 不继承，body 自己有背景 */
}
article {
border: 2px solid #4caf50; /* 不继承，子元素不会自动有边框 */
padding: 1.5rem;
background: white; /* 不继承 */
}
h1, h2 {
color: #1976d2; /* 覆盖继承的 #333 */
}
.special {
color: #d32f2f; /* 只影响 .special 及其后代 */
font-size: 1.4em; /* 后代字体变大（相对继承） */
}
button, input, select, textarea {
/* 表单元素默认不从父级继承很多样式（浏览器 user agent 样式表干预） */
font-family: inherit; /* 强制继承字体 */
font-size: inherit; /* 强制继承字号 */
color: inherit; /* 强制继承颜色 */
line-height: inherit;
}
/* 强制所有属性继承（慎用） */
.force-inherit * {
all: inherit;
}
/* 重置为初始值 */
.reset {
all: initial; /* 几乎所有属性回浏览器默认 */
}
文章标题（蓝色，覆盖了继承的 #333）
这段文字继承了 html 的 color、font-family、line-height、text-align 等。
这个块的颜色是红色，字号变大 →="" 它的子元素也会继承红色和="" 1.4em="" 字号。<="" p>="" 内联="" span="" 也红="" +="" 大字号<="" span>="" <="" code="">
这个块的颜色是红色，字号变大>回到普通段落，又变回 #333 和 16px。
这里强制 all: inherit → 会继承父级的 border、padding、background！（慎用）
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请联系我们，一经查实，本站将立刻删除。
如需转载请保留出处：https://51itzy.com/kjqy/244355.html