内联列表式样式不重写外部样式规则

我将列表样式类型应用于作为图像的无序列表。正如你在下面看到的，我的无序列表中有一个额外的无序列表。内联列表式样式不重写外部样式规则

我想嵌套的无序列表有一个'圆'列表样式类型，这就是为什么我用嵌套无序列表的内联样式。

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

到目前为止，我每次使用内联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>

来源

2012-08-01 AnchovyLegend

而不是使用内联样式，为什么不使用'class'或更具体的选择器，比如'ul ul {...}'？ – Zhihao 2012-08-01 13:10:50

这是因为您需要重写'list-style-image'和设置'list-style-type'。 – 2012-08-01 13:14:19

志豪谢谢你的建议，你说得对，我应该申请一个班... – AnchovyLegend 2012-08-01 13:15:39

尝试<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;">

来源

2012-08-01 13:13:15 ScottS

谢谢！这工作... – AnchovyLegend 2012-08-01 13:15:54

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

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

来源

2012-08-01 13:13:35

内联列表式样式不重写外部样式规则

回答

相关问题