我正在尝试覆盖我其中一个页面中列表的 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 中的设置?
最佳答案
将此添加到您的 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。
关于html - 如何覆盖主 CSS 文件中设置的 CSS 样式(列表样式类型),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/4200258/