僅在父級上應用列表樣式類型，而不是子級

Question

我有一個具有list-style-type屬性的特定值的有序列表，我希望它不會影響其子級。

當前，有序列表中嵌套了另一個有序列表，它繼承了list-style-type值。我該如何禁用？

<ol class='custom-ol'> 
    <li> cat1: 
    <ol style="list-style-type:lower-alpha"> 
    <li>text 1</li> 
    <li>text2</li> 
    </ol> 
    </li> 
    <li> 
    cat2: 
    <ol style="list-style-type:lower-alpha"> 
    <li>text 3</li> 
    <li>text 4</li> 
    </ol> 
    </li> 

css樣式

<style> 
    .custom-ol ol 
    { 
     counter-reset: custom-counter; 
     list-style-type: none; 
    } 
    .custom-ol ol li 
    { 
      counter-increment: custom-counter; 
    } 

    .custom-ol ol li:before 
    { 
      content:"(" counter(custom-counter) ") "; 
      font-weight:bold; 
    } 

</style> 

我試圖修復，以這種方式，但它不是在所有工作（更新版）

這就是我得到

ol.custom-ol 
{ 
    counter-reset: custom-counter; 
    list-style-type: none; 
} 
ol.custom-ol li 
{ 
     counter-increment: custom-counter; 
} 

ol.custom-ol li:before 
{ 
     content:"(" counter(custom-counter) ") "; 
     font-weight:bold; 
} 

ol ol { 
    list-style-type: lower-alpha; 
} 

我想父母（現在是1將是（1）與。定製醇類 和他的孩子是因爲它們是A，B，C不適用（1），（2）

Answer 1

這是你的CSS應該是什麼樣子：

ol.custom-ol 
{ 
    counter-reset: custom-counter; 
    list-style-type: none; 
} 
ol.custom-ol li 
{ 
     counter-increment: custom-counter; 
} 

ol.custom-ol li:before 
{ 
     content:"(" counter(custom-counter) ") "; 
     font-weight:bold; 
} 

ol ol { 
    list-style-type: lower-alpha; 
} 

ol ol li:before { 
    content: ""; 
} 

Answer 2

你根本沒有針對你的父母ol，你將目標定位爲子女ol兩次。一旦通過內聯樣式：

style="list-style-type:lower-alpha"

，一旦通過你的CSS文件：

.custom-ol ol 
    { 
     counter-reset: custom-counter; 
     list-style-type: none; 
    } 

如果您希望禁用的子元素list-style-type: none，然後更改.custom-ol ol到.custom-ol。這將僅針對您的父母ol。

或者，嘗試添加!important到style="list-style-type:lower-alpha"這樣的：

style="list-style-type: lower-alpha !important"

這將覆蓋應用到子ol任何其他樣式。