什么是HTML或CSS中的"父"?

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'值时,他们会采用与第一个引入的颜色类似的颜色吗?这是什么?

什么是"父母"和"孩子"在这里指的是什么?他们的定义是什么?

alb*_*ert 5

如果我们有<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将使用父级的红色值.