如何覆蓋在主CSS文件中設置的CSS樣式（列表樣式類型）

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標籤
• 添加風格既含有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> 

確保沒有其他規則設定的上行列表樣式類型。