努力在nest ul列表上获得正确的css格式

时间:2014-01-25 07:43:47

标签: html css

我正在努力解决这个问题,我希望我的第一个李子有一个圆形子弹然后嵌套的李有一个缩进的方形子弹。我的CSS尝试这样做是在下面,我的页面的默认样式不是放置任何项目符号。

有人可以帮忙吗?

<ul>

    <li>Simplification of a complex purchase category
        <ul>
            <li>Meet local regulatory compliance </li>
            <li>Subitem 2</li>
        </ul>
    </li>
    <li>Final list item</li>
</ul>

CSS

ul:first-child {
    list-style-type:circle;
}

li:first-child {
    list-style-type:square;
}

li:nth-child(2) {
    list-style-type:square;
}

2 个答案:

答案 0 :(得分:4)

试试这个:

li {
    list-style-type:circle;
}

li li {
    list-style-type:square;
}

答案 1 :(得分:0)

您可以使用标记上的类来设置list-style-type。

HTML

 <ul class="round">
        <li>Simplification of a complex purchase category
            <ul class="square">
                <li>Meet local regulatory compliance </li>
                <li>Subitem 2</li>
            </ul>
        </li>
        <li>Final list item</li>
    </ul>

CSS:

.round {
    list-style-type:bullet;
}

.square {
    list-style-type:square;
}

http://jsfiddle.net/8H9JA/