HTML 继承
程序员文章站
2022-07-03 20:11:13
继承什么是继承这里所说的继承，指的是 CSS 中的样式属性的继承。所谓继承，就是指当前样式属性不仅能作用于当前的元素，还能作用于所有的后代元素。疑问: 我怎么能知道哪些 CSS 属性是继承属性, 哪些 CSS 属性是不可继承属性?可以利用 MDN 进行查阅具有可继承性的属性, 比如 color 属性不具有可继承性的属性, 比如 margin 属性具体内容可以在MDN 继承查阅用法如下面代码所示：...
继承
什么是继承
这里所说的继承，指的是 CSS 中的样式属性的继承。所谓继承，就是指当前样式属性不仅能作用于当前的元素，还能作用于所有的后代元素。
疑问: 我怎么能知道哪些 CSS 属性是继承属性, 哪些 CSS 属性是不可继承属性?
可以利用 MDN 进行查阅
- 具有可继承性的属性, 比如 color 属性
- 不具有可继承性的属性, 比如 margin 属性
具体内容可以在MDN 继承查阅
用法如下面代码所示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>继承的概念</title>
<style>
/* 字体颜色设置在<div>元素中 */
.container {
/* CSS属性具有可继承性 */
color: lightcoral;
}
/* p {
color: lightcoral;
} */
</style>
</head>
<body>
<div class="container">
<!-- 文本内容是在<p>元素中 -->
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum nemo sed aspernatur molestias eaque,
exercitationem earum rerum aperiam quis labore ullam ratione in saepe atque aliquam vitae commodi porro.
Blanditiis?</p>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eos aliquid velit accusantium deleniti sapiente ipsa
aut, enim, natus laboriosam deserunt hic numquam obcaecati necessitatibus doloribus tenetur ratione incidunt rerum
tempore!</p>
</div>
</body>
</html>
上述示例代码运行效果如下图所示：
控制继承
有如下四个通用属性值：
-
inherit: 设置该属性会使子元素属性和父元素相同。实际上，就是 “开启继承”. -
initial: 设置属性值和浏览器默认样式相同。如果浏览器默认样式中未设置且该属性是自然继承的，那么会设置为inherit。 -
unset: 将属性重置为自然值，也就是如果属性是自然继承那么就是inherit，否则和initial一样 -
revert: 新的属性值，只有很少浏览器支持
本文地址：https://blog.csdn.net/weixin_46229298/article/details/109253348