为每个 ul 分配不同的设计

Question

我有以下网页：

我的自定义 ul 有问题，我找不到为每个 ul 分配指定设计的方法，如上（圆圈、图标、/*/、正方形）

这是我的 html 代码：

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style7.css" />
</head>
<body>

<h2>Plan d'études du semestre 1 en TC</h2>

<ol type="I"  >

  <li>Mathématiques appliquées 1
  <ul class="a"> Mathématiques appliquée 1
  <ul>
  <li> Cours:2h </li>
  <li> TD: 1h </li>
  </ul>
  </ul>
  
   
  <ul class="a"> Atelier Mathématiques appliquées1
  <ul>
  <li> TP: 1.5h </li> 
  </ul>
  </ul>
  </li>

<li>Algorithmique et structures de données
  <ul class="a"> Algorithmique et structure de données 1
  </ul>
  </li>



<li>Programmation structurée
  <ul class="a"> Langage de programmation
  </ul>
  <ul class="a"> Atelier programmation structurée
  </ul>
  </li>




<li>Architecture et système 1
  <ul class="a"> Architecture des ordinateurs
  </ul>
  <ul class="a"> Systèmes logiques
  </ul>
   <ul class="a"> Atelier Architecture et Systèmes 1
  </ul>
 </li>






  <li>Développement Web et multimédia 1
  <ul class="a"> Programmation Web1
  <ul>
  <li> Cours:1h </li>
  <li> TD:0.5h </li>
  </ul>
  </ul>
  </li>
   
  <ul class="a"> Atelier développement web et multimédia 1
  </ul>
  


<li>Culture et langues
  <ul> <u>Anglais technique 1</u>
  </ul>
  <ul class="b">C2i-l
  </ul>
  <ul> <u>Français1</u>
  </ul>
  <ul class="b"> Droit de l'homme
  </ul>
 </li>

</ol>


</body>
</html>

这是我的 CSS 代码：

.a {
  font-style: italic;
 
 list-style-type: circle;
 
}

.b {
  font-style: initial;
 
}


ol > li {
color: red;
font-style:initial;
}

ol li ul{
   color: black;
  
   font-style: italic;
   
 
}

ul li {
   color: blue;
   list-style-type: disc;
   font-style:initial;
}

这是我得到的：

Answer 1

如果您使用 'list-style-image' 作为 UL 标签，您可以实现此目的。请参考以下示例。

https://www.w3schools.com/cssref/tryit.asp?filename=trycss_list-style-image

Answer 2

到select每个列表样式你应该使用伪元素:nth-child。对于要更改的实际图标，您可以使用 list-style-type: 对于正方形、圆盘等普通符号。但是对于不可用的自定义图标，您可以使用 list-style-image: url(); 有关示例，请查看此 w3schools 指南。希望这对您有所帮助！

为每个 ul 分配不同的设计

Assign a different design for each ul

html

css

html-lists