html - 有没有办法用 css 从一个独特的元素生成无限的样式规则？ (好像嵌套了几个伪元素)

Question

只是为了学习和试验，有没有什么方法可以在没有子元素的独特元素中从头开始生成无限的 css 样式？就像使用 ::after 这样的伪元素一样和 ::before , 但在同一个选择器中多次。

遗憾的是，我注意到 ::after和 ::before伪元素的工作方式类似于自闭元素( input 、 img 等)，此外，CSS 中的这些选择器不支持伪元素。因此很明显，伪元素选择器不能嵌套其他伪元素(我希望我使用正确的术语)以获得有目的的效果，因为它们不能包含子元素...

因此，我想在不使用辅助子元素(如 <i></i>、<span></span>、<div></div>)的唯一元素中从头开始生成样式规则，仅使用纯 css(无 javascript)。

---

我希望这个使用带有多个嵌套伪元素的选择器的小例子可以代表我的目标:

HTML

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

CSS

/* Common icon properties */
.icon {
  display: inline-block;
  position: relative;
  width: 1em; height: 1em;
}
/* Search icon initial properties */
.icon.search {
  --stick-color: gray;
}
/* Magnifying glass circle 
generated by using css shapes */
.icon.search::after {
  content: " ";
  position: absolute;
  top: .15em; left: .05em;
  width: .5em; height: .5em;
  border: 0.15em solid;
  border-color: var(--stick-color);
  border-radius: 50%;
}
/* Magnifying glass stick 
generated by using css borders */
.icon.search::after::after {  /* It will not work because */
  content: " ";               /* selectors can't support  */
  position: absolute;         /* several ::after elements */
  top: .9em; left: .55em;
  width: .6em; height: 0;
  background-color: inherit;
  border-bottom: .1em solid var(--stick-color);
  border-top: .1em solid var(--stick-color);
  border-radius: 0 .2em .2em 0;
  transform: rotate(45deg);
  /* Another issue is that, if it could work, it inherit 
     relative current position of first pseudo-element, 
     getting a unexpected behavior.                      */
}

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

---

为了开始这个例子，我应该创建一个辅助元素(比如 span 或其他)，然后将生成的棒形样式应用于 span元素和 span::after伪元素:

HTML

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

CSS

/* Common icon properties */
.icon {
  . . .
}
/* Search icon initial properties */
.icon.search {
  . . .
}
/* Magnifying glass circle 
generated by using css shapes */
.icon.search::after {
  . . .
}
/* Magnifying glass stick 
generated by using css borders */
.icon.search > span {    /* This a auxiliary     */
  display: inline-block; /* element for generate */
  position: absolute;    /* the stick.           */
}
.icon.search > span::after {
  /* previous .icon.search::after::after stuff here */
}

**结果:* 它工作得很好，但我强制使用一个不是目标的元素，you can see it on fiddle .

---

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

其他注意事项:抱歉，如果我的英语无法理解。

Answer 1

听起来您正在尝试构建 "Web Components"从头开始。有多种 Javascript 框架/库具有用于构建组件的明确功能。例如，这里是 docs on Vue components .

开发这些框架的部分原因是使用纯 HTML、CSS 和 JS 很难管理组件。与伪元素不同，大多数 JS 组件支持嵌套、迭代等。我想仅用 HTML 和 CSS 开发非常复杂的组件是极其困难的(也许是不可能的)。