gpt4 book ai didi

没有任何显式声明样式的嵌套 HTML 元素的 CSS 特性

转载 作者:行者123 更新时间:2023-12-01 00:40:51 25 4
gpt4 key购买 nike

我正试图找到这个 CSS 级联/继承规则的解释。在下面的示例中,我原以为 em 标签的颜色为 #000000,但我被告知 em 标签的颜色为 #ff0000。

我习惯了声明的选择器的 CSS 特异性规则,但我从未真正考虑过嵌套在具有样式的其他元素中的元素。 W3C 规范中的哪里描述了这种行为? (或任何其他来源)

HTML:

<!DOCTYPE html>
<html>
<body>
<div>Hello, this is an <em>important</em> announcement.</div>
</body>
</html>

CSS:

* { color: #ff0000; }
div {color: #000000; }

最佳答案

您正在使用 * 选择文档中的所有元素,因此如果我们详细说明这一点,它实际上意味着

div {
color: red;
}

em {
color: red;
}

/* And so on... */

Demo

它将应用红色,因为您已经为所有元素指定了红色

但是您的 div 是黑色的,因为您使用的元素选择器比 * 选择器更具体,后者最不具体

所以如果你想让你的em是黑色的,你需要使用Demo

em {
color: inherit;
}

或者更具体一点

div em {
color: inherit;
}

关于没有任何显式声明样式的嵌套 HTML 元素的 CSS 特性,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17065137/

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