Html 有没有一种方法可以通过css从唯一的元素生成无限的样式规则？（好像嵌套了几个伪元素）

只是为了学习和试验，有没有办法在一个独特的元素中无子元素地从头开始生成无限的css样式？就好像在同一个选择器中多次使用伪元素，如

：：after

和

：：before

遗憾的是，我注意到，

：：在

之后和

：：在

之前，伪元素的工作原理类似于自关闭元素（

input

，

img

，等等），同样，css中的这些选择器不支持伪元素。因此很明显，伪元素选择器不能嵌套其他伪元素（我希望使用正确的术语）以获得预期效果，因为它们不能包含子元素

因此，我想在唯一元素中从头开始生成样式规则，而不使用辅助子元素（如

，

，

），只使用纯css（无javascript）

---

我希望这个使用选择器和几个嵌套伪元素的小示例能够代表我的目标：

HTML

<!-- A magnifying glass icon for search bars --> 
<i class="search icon"></i>

<!-- A span element added for generate stick shape within it --> 
<i class="search icon"><span></span></i>

结果：如果嵌套的伪元素可以嵌套，它应该显示一个简单的灰色搜索图标

---

对于get work本例，我应该创建一个辅助元素（如

span

或其他任何元素），然后将生成的棒形样式应用于

span

元素和

span:：after

伪元素：

HTML

<!-- A magnifying glass icon for search bars --> 
<i class="search icon"></i>

<!-- A span element added for generate stick shape within it --> 
<i class="search icon"><span></span></i>

**结果：*它工作得很好，但我强制使用一个元素，其中不是目标

---

注意：我知道我可以使用javascript直接生成内容。

---

其他注意事项：如果我的英语不可理解，很抱歉。

我有点困惑，但我有两个假设：

您希望将

：：before

和

：：after

伪元素应用于所有i标记及其子元素

假设以下标记：

i元素及其子元素的

：:before

和

：：after

/*到I元素及其子元素*/
i：：之前，i*：：之前，
i：：after，i*：：after{
内容：“；
}

输出：

所有元素的

：：前

和

：：后

/*到页面上的所有元素*/
*：：之前，
*：：之后{
内容：“；
}

输出：

您希望为元素生成CSS样式，就像使用脚本语言一样：

---

为此，您可以使用SASS:

这听起来像是您试图从头开始构建。有许多Javascript框架/库具有构建组件的显式功能。例如，下面是示例

---

开发这些框架的部分原因是很难使用纯HTML、CSS和JS管理组件。与psuedo元素不同，大多数JS组件都支持嵌套、迭代等。我认为仅使用HTML和CSS开发非常复杂的组件是非常困难的（可能不可能）。

简短回答：使用CSS无法生成所需数量的嵌套元素。长句回答：如果你把你的问题变得更加具体，说明你想要达到什么目标，那么你就可以不需要太多的元素就可以做到。我们只需要一个元素就可以轻松创建搜索图标。我正在制作一个基于web技术的实验性2D动画引擎（用于学习），我想制作复杂的样式规则集，而不需要在目标元素中附加其他元素。搜索图标示例演示了如何使用css中的图形从零开始生成具有一级深度的内容。我的目标是深入研究并从元素生成无限的图形（从css样式应用）。