gpt4 book ai didi

CSS 嵌套选择器

转载 作者:行者123 更新时间:2023-11-28 09:37:54 25 4
gpt4 key购买 nike

在下面的代码中,我不明白为什么我们需要将 color:white 放在单独的 .marked p 中?如果我在 marked 中执行 color:white 为什么它不起作用?有人可以解释一下吗?提前致谢! :)

<!DOCTYPE html>
<html>
<head>
<style>
p
{
color:blue;
text-align:center;
}
.marked
{
background-color:red;
}
.marked p
{
color:white;
}
</style>
</head>

<body>
<p>This paragraph has blue text, and is center aligned.</p>
<div class="marked">
<p>This paragraph has not blue text.</p>
</div>
<p>p elements inside a "marked" classed element keeps the alignment style, but has a different text color.</p>
</body>
</html>

最佳答案

通常一个子元素会inherit其父项的颜色。

但是,在这种情况下,您已经专门为所有<p> 添加了颜色样式。元素:

p { color:blue; text-align:center; }

这会覆盖可能已在 .marked 中设置的任何继承样式对于这部分标记:

<div class="marked">
<p>This paragraph has not blue text.</p>
</div>

选择器:

.marked p {}

有更高的specificity比元素选择器 p本身并覆盖其值。

关于CSS 嵌套选择器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18176342/

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