html - 如何覆盖主 CSS 文件中设置的 CSS 样式(列表样式类型)

Question

我正在尝试覆盖我其中一个页面中列表的 CSS 设置。在我的主 CSS 文件中，我设置了以下规则:

ul, li { 列表样式类型:无；

我有一个页面，我想在其中设置列表的样式 - 我还想增加该页面上那些列表项之间的间距。

页面看起来像这样:

  <div><h3 style="color:#023467;">Hello</h3>
        <ul style="color:#006699; list-style-type:circle;"> <!-- has no effect -->
            <li>line 1</li>
            <li>line 2</li>
            <li>line 3</li>
            <li>line 4</li>
        </ul>
    </div>

到目前为止，我已经尝试了以下方法:

• 将样式添加到包含的 UL 标记
• 同时将样式添加到包含的 UL 标记和每个 LI 标记

到目前为止，没有一个有效。因为我有超过 1K 的页面引用了 main.css 文件，所以我不想更改它。但是如何覆盖页面中特定列表项的设置？

即使我在元素本身应用样式，为什么我也无法覆盖 main.css 中的设置？

Answer 1

将此添加到您的 CSS 文件中:

ul.circle, ul.circle > li { list-style-type: circle; }

使用这个标记:

<div><h3 style="color:#023467;">Hello</h3>
        <ul class="circle" style="color:#006699;">
            <li>line 1</li>
            <li>line 2</li>
            <li>line 3</li>
            <li>line 4</li>
        </ul>
    </div>

确保没有其他规则设置 ul list-style-type。