html - 仅将列表样式图像应用于给定的 ul，而不是下层的 ul

Question

我有一个<ul id="islist">相应的css：

#islist {
    list-style-image: url('../img/img.png');
}

#islist * li {
    list-style-type: none;
}

然后，在 this 中，还有另一个：

<ul id="islist">
    <li>title</li>
    <ul>
        <li>li1</li>
        <li>li2</li>
        <li>li3</li>
        <li>li4</li>
    </ul>
</ul>

问题是所有<li>元素都有图像设置，而不仅仅是title. 我该如何解决这个问题？

Answer 1

您的 html 无效，您不能将 ul 作为 ul 的子级，将 ul 放在 li 中，然后样式将应用于嵌套的 lis。

<ul id="islist">
    <li>title</li>
    <li><ul>
        <li>li1</li>
        <li>li2</li>
        <li>li3</li>
        <li>li4</li>
    </ul>
    </li>
</ul>

我也认为你想使用list-style: none;而不是list-style-type:none;

演示

Answer 2

问题是样式应用于ul，而不是li. 更改 CSS 如下：

#islist {
    list-style-image: url('../img/img.png');
}

#islist ul {
    list-style-type: none;
}