覆盖 CSS 样式

发布于 2024-07-16 10:54:38 字数 673 浏览 6 评论 0原文

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

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

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

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

我有一个带有“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

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

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.

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

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

.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

<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....

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

a√萤火虫的光℡ 2024-07-23 10:54:38

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

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

!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:

.blog_body ul 
{
    list-style-type: disc; 
    margin: 1em;
}
吾家有女初长成 2024-07-23 10:54:38

将此:更改

.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; }

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; }
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文