覆盖CSS样式

Question

8

在我们所有页面使用的全局样式表中，有以下这行代码：

ul { margin: 0; }
li { list-style-type: none; padding-bottom: 3px; }

因此，我的页面中任何ul元素内的li元素旁边都不会出现圆点。

然而，在特殊情况下，我需要在li旁显示圆点。

我有一个带有"class"属性为"blog-post"的div元素，我认为以下代码可以解决我的问题。

.blog_body ul { list-style-type: disc; }
.blog_body ol { list-style-type: decimal; }

然而这不起作用。所以使用以下HTML片段：

<ul>
  <li>Testing</li>
</ul>
<ol>
  <li>Testing</li>
</ol>

使用以下方法可以得到结果:

Testing
1. Testing

嵌套在ul中的li中仍然没有光盘。有什么想法可以让它们到达那里吗？我的CSS技能不够强大...

- mwilliams

2个回答

3

把这个改成：

.blog_body ul { list-style-type: disc; }
.blog_body ol { list-style-type: decimal; }

转换为：

.blog_body ul li { list-style-type: disc; }
.blog_body ol li { list-style-type: decimal; }

- Ron DeVera

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Scott · Accepted Answer

不需要使用!important，因为特定类别的样式已经覆盖了全局样式。问题在于你在全局样式中将margin设置为零。样式类型被正确渲染，但是你只是看不到它。这应该对你有用：

.blog_body ul 
{
    list-style-type: disc; 
    margin: 1em;
}