gpt4 book ai didi

html - HTML 或 CSS 中的 'parent' 是什么?

转载 作者:行者123 更新时间:2023-11-28 04:05:22 25 4
gpt4 key购买 nike

我被介绍到以下代码:

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

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

这里的“ parent ”和“ child ”指的是什么?他们的定义是什么?

最佳答案

如果我们有一个 <p><div> 里面元素,<div><p> 的父级和 <p><div> 的 child

<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

enter image description here

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

可以看到所有的CSS选择器here

inherit应用于 HTML 节点的 CSS 属性,只需采用属性的父值。

所以如果我有这样的 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将采用父级的红色值。

关于html - HTML 或 CSS 中的 'parent' 是什么?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42827783/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com