如何覆盖主CSS文件中设置的CSS样式（list-style-type）

Question

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

ul，li {list-style-type：none; }

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

页面如下所示：

  <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标记
• 将样式BOTH添加到包含的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。