在CSS樣式表中更改列表的顏色

Question

所以我在html中有一些有序列表的代碼，並且我正在嘗試爲添加的每個深度添加不同顏色的樣式表。

例如：

<ol> 
<li>This is red</li> 
    <ol> 
    <li>This is blue</li> 
    </ol> 
</ol> 

如何做到這一點與CSS樣式表？

試過這樣的事情：

ol.a { 
color:blue; 
} 
ol.b { 
color:red; 
} 

顯然沒有奏效，否則我就不會在這裏了。

Answer 1

答案很簡單：

ol { 
color:blue; 
} 
ol ol { 
color:red; 
} 

Answer 2

下面是正確的CSS

ol li { 
color:blue; 
} 
ol li ol li { 
color:red; 
} 

Answer 3

HTML：

<ol class="a"> 
<li>This is red</li> 
    <ol class="b"> 
    <li>This is blue</li> 
    </ol> 
</ol> 

CSS：

ol.a { 
color:red; 
} 
ol.b { 
color:blue; 
} 

Answer 4

您可以在醇應用CSS這樣 -

ol > ol:nth-child(2) { 
 
    background-color:red; 
 
} 
 

 
ol > ol:nth-child(3) { 
 
    background-color:blue; 
 
} 
 

 
ol > ol:nth-child(4) { 
 
    background-color:green; 
 
}

<ol> 
 
<li>This is red</li> 
 
<ol> 
 
    <li>This is blue</li> 
 
</ol> 
 
<ol> 
 
    <li>This is blue</li> 
 
</ol> 
 
    <ol> 
 
    <li>This is blue</li> 
 
</ol> 
 
    
 
</ol>