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

Question

我有以下 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 覆盖。为什么？

Answer 1

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

由于 ul 在 ol 中，li 是两个列表元素的后代，因此两个选择器都适用。

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

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

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

ol ul li { }

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

ol > li {}
ul > li {}

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