覆盖 CSS 样式

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/674537/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 20:27:04  来源:igfitidea点击:

Overriding a CSS style

cssxhtmloverridingstylesheet

提问by mwilliams

In a global style sheet used across all of our pages sits the following line:

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

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

Therefore, any ul's inside my pages render with no discs next to li's.

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

However, in special cases, I need to display the disc next to a li.

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

I have a div with the class "blog-post" and though that the following would do the trick for me.

我有一个“博客文章”类的 div,尽管以下内容对我有用。

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

However this isn't doing the trick.

然而,这并不能解决问题。

So with the following snippet of HTML

因此,使用以下 HTML 片段

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

Results with:

结果与:

Testing
1. Testing

Still no disc in the li's nested in the ul's. Thoughts on how I can get them there? My CSS-fu is weak....

在 li 中仍然没有光盘嵌套在 ul 中。关于如何让他们到达那里的想法?我的 CSS-fu 很弱....

回答by Scott

!important is not necessary because class-specific styles override global styles already. The problem is because in the global style you set the margin to zero. The style type is being rendered correctly, but you just can't see it. This should work for you:

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

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

回答by Ron DeVera

Change this:

改变这个:

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

to this:

对此:

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