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

这应该有效：

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

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

Answer 2

你可以尝试这个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）。见Fiddle

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>

样式只有第一级无序列表

4 个答案: