Uno*_*ing 1 html css inheritance parent
我被介绍到以下代码:
<!DOCTYPE html>
<html>
<head>
<style>
span {
color: blue;
border: 1px solid black;
}
.extra span {
color: inherit;
}
</style>
</head>
<body>
<div>
Here is <span>a span element</span> which is blue, as span elements are set to be.
</div>
<div class="extra" style="color:green">
Here is <span>a span element</span> which is green, because it inherits from its parent.
</div>
<div style="color:red">
Here is <span>a span element</span> which is blue, as span elements are set to be.
</div>
</body>
</html>Run Code Online (Sandbox Code Playgroud)
链接:https://www.w3schools.com/cssref/tryit.asp?filename = trycss_inherit
我不确定为什么额外跨度的颜色是绿色的.当他们使用'inherit'值时,他们会采用与第一个引入的颜色类似的颜色吗?这是什么?
什么是"父母"和"孩子"在这里指的是什么?他们的定义是什么?
如果我们有<p>一个内部的<div>元件时,<div>是的父<p>和<p>是的孩子<div>
<div>
<p></p>
</div>
Run Code Online (Sandbox Code Playgroud)
你可以阅读这个网站:https://www.w3schools.com/js/js_htmldom_navigation.asp它完美地解释了.
节点树中的节点彼此具有层次关系.
术语父,子和兄弟用于描述关系.
- 在节点树中,顶级节点称为根(或根节点)
- 除了根(没有父节点)之外,每个节点都只有一个父节点
- 节点可以有许多子节点
- 兄弟姐妹(兄弟姐妹)是具有相同父母的节点
CSS使用这种结构做出那样的具体选择first-child,:nth-child(n),:last-child...
您可以在此处查看所有CSS选择器
inherit应用于HTML节点的CSS属性的值只是获取属性的父值.
所以,如果我有这样的HTML:
<div>
<p></p>
<p class="red"></p>
</div>
Run Code Online (Sandbox Code Playgroud)
和css一样:
div {
background-color: red;
}
div > p {
background-color: blue;
}
.red {
background-color: inherit;
}
Run Code Online (Sandbox Code Playgroud)
使用红色类的div inherit将使用父级的红色值.
| 归档时间: |
|
| 查看次数: |
12254 次 |
| 最近记录: |