html - 仅样式化无序列表的第一级

Question

我有一个这样的列表：

    <ul id="main">
        <li>January
            <ul>
                <li>test</li>
                <li>test2</li>
            </ul>
        </li>

        <li>February
            <ul>
                <li>test</li>
                <li>test2</li>
            </ul>
        </li>
    </ul>

我只想影响 li 的第一级 - 我认为这个 css 可以解决问题，但它似乎无法正常工作。

#main > li {
cursor: pointer;
list-style-image: url('plus_sign.gif');
}

子列表旁边仍然有一个加号......我会做错什么？

Answer 1

你可以试试这个css，它看起来像你想要的。

#main{
    cursor:pointer;
    list-style-image:url('http://www.w3schools.com/cssref/sqpurple.gif');
}
#main ul{
    /*If you don't want the hallow circles*/
    list-style:none;
    /*if you want the hollow cirles, remove list-style and uncomment list-style-image:none
     list-style-image:none;
    */
}

它将仅在 1 月和 2 月显示 plus_sign.gif（在这种情况下为 sqpurple.gif）。见小提琴

Answer 2

这应该有效：

  #main  li {
    list-style-image: none;
  }    
  #main > li {
    cursor: pointer;
    list-style-image: url('plus_sign.gif');
  }    

list-style-image 是一个可继承的属性，因此它从其父级获取值。

Answer 3

添加另一条规则来处理 li 的所有其他情况：

ul > li{
    color: red;
    /*specifically*/
    list-style-image: none;
}

给 css 一个默认值，这样您的特定情况将是一个例外。

Answer 4

创建另一种样式并修改 ul 以使用该类：

.main > li {
cursor: pointer;
list-style-image: url('imageurl');
}
.main > li > ul > li {
cursor: auto;
list-style-image: none;
}

<ul class="main">
    <li>January
        <ul>
            <li> test</li>
            <li>test2</li>
        </ul>
    </li>

    <li>February
        <ul>
            <li>test</li>
            <li>test2</li>
        </ul>
    </li>
</ul>