3级ul li ul li liststyle css问题

时间:2009-09-10 15:57:32

标签: html css

我不会进入这个我的无序列表,但我没有得到风格的工作。 希望你能帮助我!

我的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-tag。

我做错了什么?

谢谢你的帮助:)

1 个答案:

答案 0 :(得分:1)

选择器A Bdescendent selector,并且匹配任何B元素,它是A元素的后代,无论它是否是直接下降(A元素的子节点)或者它只是一个传递后代(例如A元素的子节点的子节点)。

如果您只想选择直接子节点,请使用child selector 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;
}