如何取消“li:before {content: 'text'}”的继承而不为每个 <li> 元素重新分配它？

如何解决如何取消“li:before {content: 'text'}”的继承而不为每个 <li> 元素重新分配它？

大家！

总体目标是所有未明确声明属性的 li 元素都使用标准值。

我不明白为什么无法重置内容属性：

ul {
 position: relative;
 list-style: none;
 margin-left: 0;
 padding-left: 1.2em;
}

li:before {
 content: unset;
}

ul > li:before {
 content: "A";
 position: absolute;
 left: 0;
}

ul > ul > li:before {
 content: "B";
 position: absolute;
 left: 0;
}

<ul>
 <li>Level 1 Item 1</li>
 <ul>
  <li>Level 2 Item 1</li>
  <ul>
   <li>Level 3 Item 1</li>
   <li>Level 3 Item 2</li>
   <li>Level 3 Item 3</li>
  </ul>
 </ul>
</ul>

结果：

但结果不应该是这样的：

如何解决这个问题，使结果与上一张图片相同？

解决方法

尝试向您的 ul 标签添加一个类。我通过将 li 删除为 ul > li > li:before 对您的第二个 ul.myClass > li:before 选择器进行了轻微更改。运行代码片段，你会看到你想要的输出

ul {
 position: relative;
 list-style: none;
 margin-left: 0;
 padding-left: 1.2em;
}

li:before {
 content: unset;
}

ul.myParentClass > li:before {
 content: "A";
 position: absolute;
 left: 0;
}

ul.myClass > li:before {
 content: "B";
 position: absolute;
 left: 0;
}

<ul class="myParentClass">
 <li>Level 1 Item 1</li>
 <ul class="myClass">
  <li>Level 2 Item 1</li>
  <ul>
   <li>Level 3 Item 1</li>
   <li>Level 3 Item 2</li>
   <li>Level 3 Item 3</li>
  </ul>
 </ul>
</ul>

,

您使用简单的 ./.docker ├── mysql │ ├── db │ │ └── db.sql │ ├── my.cnf │ └── ohmy.cnf ├── nginx │ └── conf.d │ └── php.conf ├── php │ └── Dockerfile └── test └── test.txt 6 directories,6 files 选择器取消设置。这将被带有 li:before 的其他规则覆盖，尤其是最具体的 ul >，因为它包含您的第 3 级项目（第 2 级和第 1 级 ul > ul > li:before 元素的子项） .您将需要另一个这些选择器，嵌套 3 个级别，以取消这些特定项目的设置：

ul

ul {
 position: relative;
 list-style: none;
 margin-left: 0;
 padding-left: 1.2em;
}

ul > li:before {
 content: "A";
 position: absolute;
 left: 0;
}

ul > ul > li:before {
 content: "B";
 position: absolute;
 left: 0;
}

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

顺便说一句，我推荐其中之一

• （推荐）将 <ul> <li>Level 1 Item 1</li> <ul> <li>Level 2 Item 1</li> <ul> <li>Level 3 Item 1</li> <li>Level 3 Item 2</li> <li>Level 3 Item 3</li> </ul> </ul> </ul> 更改为 :before，因为您正在编写无论如何都无法在仅支持 CSS2 的浏览器中使用的 CSS3，或者
• 使用 ::before 而不是 content: none，这将使您的代码在仅支持 CSS2 的浏览器中受支持（如果您关心的话）

,

这个问题是我的继承错误产生的。我不应该把我的问题归咎于 CSS。 CSS 做的一切都对...

解决方案（使用检查是否缺少前一级别 — :not(ul)）：

*:not(ul) > ul > ul > li::before {
 content: "B";
 position: absolute;
 left: 0;
}