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;
}