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

你可以通过这种方式申请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>

更改CSS样式表中列表的颜色

4 个答案: