HTML 或 CSS 中的“父级”是什么？

我被介绍到以下代码：

 <!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>

链接： https ://www.w3schools.com/cssref/tryit.asp?filename=trycss_inherit

我不确定为什么额外跨度的颜色是绿色。当他们使用“继承”值时，他们是否采用与第一个引入的颜色相似的颜色？是这样吗？

这里的“父母”和“孩子”指的是什么？他们的定义是什么？

原文由 UnorthodoxThing 发布，翻译遵循 CC BY-SA 4.0 许可协议

由于 <span></span> 元素嵌套在它们的“父” <div></div> 元素中，因此它们被称为“父”div 的“子代”。

 <div id="parent">
  <span id="child1"></span>
  <span id="child2"></span>
  <span id="child3"></span>
</div>

这 3 个 span 是父 div 的子元素，并且是彼此的兄弟姐妹。很像一个家庭。当子项从其父项继承样式时，它使用与其父项相同的样式用于该特定样式。

 color: inherit;

意味着在为 span 分配颜色时，它将遵循父颜色，在本例中为绿色。

原文由 Bango 发布，翻译遵循 CC BY-SA 3.0 许可协议

If we have a <p> inside a <div> element, the <div> is the parent of the <p> and the <p> 是 <div> 的孩子

<div>
  <p></p>
</div>

你可以阅读这个网站： https ://www.w3schools.com/js/js_htmldom_navigation.asp 它解释得很好。

节点树中的节点彼此之间具有层次关系。

术语父母、孩子和兄弟姐妹用于描述关系。

在节点树中，最顶端的节点称为根（或根节点）

每个节点只有一个父节点，除了根节点（没有父节点）

一个节点可以有多个孩子

兄弟姐妹（兄弟或姐妹）是具有相同父节点的节点

CSS 使用这种结构来制作特定的选择器，例如 first-child , :nth-child(n) , :last-child …

你可以在这里看到所有的 CSS 选择器

应用于 HTML 节点的 CSS 属性的值 inherit 仅采用属性的父值。

所以如果我有这样的 html：

 <div>
   <p></p>
   <p class="red"></p>
</div>

像这样的 CSS：

 div {
   background-color: red;
}

div > p {
  background-color: blue;
}

.red {
  background-color: inherit;
}

具有红色类的 div，使用 inherit 将采用父级的红色值。

原文由 Albert Lázaro de Lara 发布，翻译遵循 CC BY-SA 3.0 许可协议

HTML 或 CSS 中的“父级”是什么？

你尚未登录，登录后可以

body :first-child(不是body:first-child，中间有空格)伪类选择器到底选中了什么元素？

CSS如何让指定的某个Tag不显示（比如：display=none），但是还是占有位置呢？

如何实现类似豆包的AI改写框跟随内容滚动效果？

问一个鼠标滚动事件，这种是怎么实现的？

如何在CSS中实现滚动条不溢出圆角框？

form对象根据表单dom元素的name属性获取元素对象是基于什么标准的？兼容性如何？

请问，是否可以设定Table的宽度，或者不让其超过父容器呢？

Stack Overflow 翻译