Question

我将list-style-type应用于作为图像的无序列表。如下所示，我的无序列表中还有一个无序列表。

我希望嵌套的无序列表具有'circle'list-style-type，这就是我使用嵌套无序列表的内联样式的原因。

我遇到的问题是它仍然在嵌套列表中显示列表样式的绿色复选标记，而不是圆列表样式。

到目前为止，每次我使用内联css它都会覆盖任何外部样式规则，这就是为什么我不确定在这种情况下我应该做什么，我感谢任何建议。

CSS

ul{list-style-image:url(images/green-checkmark.png);}

标记

<ul>
    <li>hello</li>
    <li>animals
         <ul style="list-style-type:circle;">
           <li>cats</li>
           <li>dogs</li>
           <li>rats</li>
            <li>hogs</li>
            <li>snakes</li>
            <li>frogs</li>
        </ul>
    </li>
    <li>onions</li>
</ul>

Answer 1

尝试<ul style="list-style-type:circle; list-style-image: none;">。

这两个属性是不同的。如果您设置了任何list-style-image它会覆盖list-style-type，后者仅在图像不可用时才会被使用（作为备份）。因此，为了强制图像不被使用，需要明确告知在这种情况下不使用图像。

你实际上应该能够像这样设置它：

ul{
  list-style-image:url(images/green-checkmark.png);
  list-style-type:circle; /* back-up */
}

然后进行内联：<ul style="list-style-image: none;">

Answer 2

您是否尝试过覆盖列表样式图像？例如style="list-style-image: none; list-style-type:circle;"。

志浩是对的 - 这可以作为外部CSS中的类或更具体的选择器来完成。

内联列表样式类型不覆盖外部样式规则

2 个答案: