為什么用“ ol li”的CSS取代“ ul li”的CSS取代“ ul”中（但在“ ol”中的“ li”之下）的子彈？

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

它顯示了ol li刪除並覆蓋的ul li樣式。

由於ul在ol內部，因此li是兩個list元素的后代，因此兩個選擇器都將適用。

這兩個選擇器具有相同的特異性 ，因此按順序應用它們。

您已經在樣式表中的ul li ol li樣式之后定義了ol li樣式，因此它們將覆蓋較早的樣式。

您可以使用更具體的選擇器定位更深層的列表：

ol ul li { }

或者，您可以使用子組合器代替后代組合器：

ol > li {}
ul > li {}

（請注意，將ul作為ol的子代是無效的HTML。嵌套列表應出現在li 。）

Answer 2

如果將<ul> 放在 <li>內，它將起作用：

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

http://jsfiddle.net/6tGvA/

在您的版本中，無序列表不會嵌套在li項中以便正確縮進，因此ul被忽略。