HTML 或 CSS 中的 'parent' 是什么？

Question

我被介绍到以下代码：

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

Link: https://www.w3schools.com/cssref/tryit.asp?filename=trycss_inherit

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

这里的'parent'和'child'指的是什么？他们的定义是什么？

Answer 1

由于 <span></span> 元素嵌套在 'parent' <div></div> 元素中，因此它们被称为 'parent' div 的 'children' ].

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

3个跨度是parentdiv的child人，互为兄弟姐妹。很像一个家庭。当 child 从其 parent 继承样式时，它使用与它的 parent 用于该特定样式的相同样式。

color: inherit;

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

Answer 2

如果我们在 <div> 元素中有一个 <p>，则 <div> 是 <p> 的父元素，而 <p> 是 <p> 的子元素<div>

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

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

The nodes in the node tree have a hierarchical relationship to each other.

The terms parent, child, and sibling are used to describe the relationships.

In a node tree, the top node is called the root (or root node)

Every node has exactly one parent, except the root (which has no parent)

A node can have a number of children

Siblings (brothers or sisters) are nodes with the same parent

CSS 使用此结构来创建特定的选择器，例如 first-child、:nth-child(n)、:last-child...

您可以看到所有 CSS 个选择器 here

应用于 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;
}

带红色class的div，使用inherit将取父值red。

Answer 3

继承摘要： 来自 https://developer.mozilla.org/en/docs/Web/CSS/inherit

The inherit CSS-value causes the element for which it is specified to take the computed value of the property from its parent element. It is allowed on every CSS property.

将您的代码分解为单个部分以了解发生了什么：

span {
    color: blue;
    border: 1px solid black;
}

这意味着每个跨度都有蓝色。

继续下一行：

.extra span {
    color: inherit;
}

这意味着具有 class="extra" 的元素内的每个跨度都将继承颜色。意味着 .extra 内的所有 <span> 都将采用它的父颜色。

现在，正如您在结果中看到的那样，每个跨度都是蓝色的，除了 div 中带有 class extra 的跨度，它在颜色上有一个内联样式，表示它是绿色.

Answer 4

在此，您同时使用了 Internal 和 Inline 样式。由于内联样式具有 最高优先级 优于 Internal 和 External 样式，这就是为什么会产生额外跨度的原因成为绿色。

HTML 或 CSS 中的 'parent' 是什么？

What is 'parent' in HTML or CSS?

html

css

inheritance

parent