如何覆盖主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.