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

当我执行＆＃34;检查元素＆＃34;时，它显示ul li样式划掉并由ol li覆盖。为什么呢？

Answer 1

它显示了由ul li划掉并覆盖的ul li样式。

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

两个选择器具有相同的specificity，因此它们被应用in order。

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

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

ol ul li { }

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

ol > li {}
ul > li {}

（请注意，将ul作为ol的子项时，HTML无效。嵌套列表应显示在li内。）

Answer 2

如果你把你的＆lt; ul＆gt; 里面＆lt; li＆gt;它会起作用：

<ol>
    <li>First level element, ordered
        <ul>
            <li>Unordered list</li>
        </ul>
    </li>
</ol>

在您的版本中，无序列表未嵌套在li项中以进行正确的缩进，因此会忽略ul。