Saya memiliki teks berikut untuk dihasilkan:

enter image description here

Ini adalah kode HTML saya:

<!DOCTYPE html>
<head>
<meta charset="utf-8"/>
<link rel="stylesheet" href="style5.css">
<title> Département TI </title>
</head>

<body>
<h1>Département TI</h1>
    
<ul>

  <li>TC</li>
  <li>2ème année
  <ul>
      <li id="a">DSI</li>
      <li id="a">SEM</li>
      <li id="a">RSI</li>
    </ul>
  
  </li>
  <li>3ème année</li>
</ul>


</body>

</html>

Dan ini adalah kode CSS saya:

li {list-style-type: none;}
li::before
{
content: "-*-"; 
}

Inilah yang saya dapatkan saat ini:

enter image description here

1
Amira Bedhiafi 19 November 2020, 23:28

1 menjawab

Jawaban Terbaik

Karena :first-child masih akan menargetkan keduanya, Anda harus menerapkan li:before seperti yang Anda lakukan, tetapi kemudian menimpa aturan itu untuk ul > li > ul. Sesuatu sebagai berikut

li {
  list-style-type: none;
}

ul > li::before {
  content: "-*-";
}

ul > li > ul > li:before {
  content: none;
}

Jika tidak, Anda harus membungkus tag ul Anda di dalam sesuatu yang lain, sehingga Anda dapat menggunakan :first-child pada elemen ul itu sendiri, seperti contoh ini

<h1>Département TI</h1>

<div>
  <ul>
    <li>TC</li>
    <li>2ème année
      <ul>
        <li id="a">DSI</li>
        <li id="a">SEM</li>
        <li id="a">RSI</li>
      </ul>
    </li>
    <li>3ème année</li>
  </ul>
</div>

Dan CSS

li {
  list-style-type: none;
}

div > ul > li:before {
    content: "-*-";
}
2
CapitanFindus 19 November 2020, 20:35