覆盖CSS样式

时间:2009-03-23 18:03:10

标签: css xhtml override stylesheet

在我们所有页面中使用的全局样式表中包含以下行:

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

因此,我的页面中的任何ul都会在li的旁边呈现没有光盘。

但是,在特殊情况下,我需要在li旁边显示光盘。

我有一个“博客帖子”类的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中。关于如何让他们在那里的想法?我的CSS-fu很弱......

2 个答案:

答案 0 :(得分:15)

!important不是必需的,因为特定于类的样式已经覆盖了全局样式。问题是因为在全局样式中,您将边距设置为零。样式类型正在正确呈现,但您无法看到它。这应该适合你:

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

答案 1 :(得分: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; }