更改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

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 2

下面是正確的CSS

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

Answer 3

簡單答案：

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

Answer 4

您可以通過這種方式在您的OL上應用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>