gpt4 book ai didi

html - 为什么 "ol li"的 CSS 覆盖 "ul li"中的元素符号 "ul"的 CSS(但在 "li"中的 "ol"下)?

转载 作者:行者123 更新时间:2023-11-28 04:54:59 26 4
gpt4 key购买 nike

我有以下 HTML:

<ol>
<li>A numbered bullet</li>
<ul>
<li>An un-numbered bullet</li>
<ul>
</ol>

但是显示是这样的:

1. A numbered bullet
1. An un-numbered bullet

当我执行“检查元素”时,它显示 ul li 样式被划掉并被 ol li 覆盖。为什么?

最佳答案

it shows the ul li styles crossed out and overriden by ol li.

由于 ulol 中,li 是两个列表元素的后代,因此两个选择器都适用。

两个选择器有相等的specificity , 所以它们被应用 in order .

您在样式表中的 ul li 样式之后定义了 ol li 样式,因此它们覆盖了前面的样式。

您可以使用更具体的选择器来定位更深的列表:

ol ul li { }

或者您可以使用子组合器而不是后代组合器:

ol > li {}
ul > li {}

(请注意,将 ul 作为 ol 的子项是无效的 HTML。嵌套列表应出现在 li 中.)

关于html - 为什么 "ol li"的 CSS 覆盖 "ul li"中的元素符号 "ul"的 CSS(但在 "li"中的 "ol"下)?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24704947/

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