时间戳

首页 > 解决方案 > 仅对第一个节点使用 ::before

html - 仅对第一个节点使用 ::before

问题描述

我要生成以下文本：

在此处输入图像描述

这是我的 HTML 代码：

<!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>

这是我的 CSS 代码：

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

这是我目前得到的：

在此处输入图像描述

标签： htmlcss

解决方案

由于:first-child仍将针对它们两个，您将需要应用li:before您所做的那样，但然后覆盖该规则ul > li > ul。如下所示

li {
  list-style-type: none;
}

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

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

否则，您需要将ul标签包装在其他东西中，这样您就可以:first-child在ul元素本身上使用，就像这个例子

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

和 CSS

li {
  list-style-type: none;
}

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

推荐阅读