3級ul li ul li liststyle CSS問題

Question

我不打算討論這個問題，但我沒有排序的順序，但是我沒有使樣式起作用。 希望你能幫我！

我的html代碼：

<ul id="sitemap-list">
    <li><a href="#" onclick="">LEV0</a>
        <ul>
            <li><a href="#" onclick="">LEV11</a></li>
            <li><a href="#" onclick="">LEV1</a></li>
        </ul>
    </li>

    <li><a href="#" onclick="">LEV0</a>
         <ul>
            <li><a href="#" onclick="">LEV1</a>
                <ul>
                    <li><a href="#" onclick="">LEV2</a></li>
                    <li><a href="#" onclick="">LEV2</a></li>
                </ul>
            </li>
         </ul>
    </li>
</ul>

還有我的CSS代碼：

#sitemap-list li ul li a {
    display: block;
    text-decoration: none;
    list-style-type: none;
    color: red;
    margin-left:  20px;
    margin-top: -5px;
}

#sitemap-list ul li ul li a {
    display: block;
    text-decoration: none;
    list-style-type: none;
    color: #6e90a6;
    margin-left:  50px;
}

問題在於，第一個css“塊”使用a標簽標記所有列表項的樣式。

我做錯了什么？

謝謝您的幫助 ：）

Answer 1

選擇器AB是后代選擇器，並且匹配作為A元素后代的任何B元素，無論它是直接后代（ A元素的子節點）還是只是可傳遞后代（例如子節點） A元素的節點）。

如果只想選擇直接子節點，請使用子選擇器A > B ：

#sitemap-list > li > ul > li > a { /* … */ }
#sitemap-list > li > ul > li > ul > li > a { /* … */ }

但是，由於Internet Explorer不支持子選擇器，因此您需要“重置”已被覆蓋的屬性，例如margin-top屬性：

#sitemap-list ul li ul li a {
    margin-top: 0;
}