HTML5/CSS3：有没有办法使用伪元素在标记中创建标记？（避免使用Javascript）

据我所知，没有可靠的方法来实现我的目标，但我想我还是会请这里的专家看看是否可以实现

我希望创建一种简化的样式设计方法，允许用户使用带有类或ID的单个标记，该类或ID采用嵌套标记的格式。例如，一个DIV中似乎有另一个DIV，允许使用更复杂的样式，而目前只能使用嵌套元素

我想做的一个例子是：

<div class="nesteddiv">{content}</div>

{content}

并使其呈现为：

<div class="outerdiv"><div class="innerdiv">{content}</div></div>

{content}

我们的目标可能是让outerdiv和innerdiv拥有自己的边框、背景、边距和间距，以创建一个复杂的样式，而这个样式无法在单个DIV上完成（我认为单个DIV不可能有多个边框）

---

我知道：：before和：：after中有伪元素，允许您在内容前后的包含元素中插入原始文本或图像，但这些元素不能插入html标记并进行渲染。是否有另一种方法可以将单个html元素转换为呈现为多个嵌套元素的内容？我试图避免使用Javascript，因为我的一些查看器禁用了Javascript。我知道有一种方法可以在Javascript中创建自定义元素，也可以简单地用更复杂的嵌套代码替换某个类中的所有div，但如果纯HTML/CSS中已有一种更简单的方法，我宁愿避免所有额外的编码。

如果我理解正确，你需要做一些特殊的样式，比如边框和悬停效果等。这对于伪元素来说是完全可行的

---

这些元素的使用远远超出了文本和图像的范围。例如，使用伪元素可以非常有效地创建双边框。请阅读伪元素，或者更清楚地了解您想要实现的样式，以便我们可以更具体地帮助您。

使用纯CSS无法实现这一点。您可以查看和伪元素，但它们所允许的CSS规则范围有限，仅适用于第一行或第一个字母。

没有任何好的方法来实现这一点

您可以在元素上使用

display:table

。假设内容不是表格元素，将创建

表格行

和

表格单元格

：

生成缺少的子包装器：

• 如果“表”或“内联表”框的子C不是正确的表子级，则在C和周围生成一个匿名的“表行”框 C的所有连续兄弟姐妹都不是适当的表子级
• 如果“表行”框的子C不是“表单元格”，则围绕C和所有连续的 不是“表单元格”框的C的同级

但是，问题是不能使用CSS选择器来选择那些匿名元素。所以你不能设计它们。因此，这种方法通常是无用的

另一种做法是：生成所需元素的伪元素包装器。这可以通过以下提议的

：：外部
来实现：

“：：outside”伪元素是立即生成的元素
在伪元素的外部

当给定参数时，“：：outside（n）”表示第n个
在第n-1个伪元素周围立即生成伪元素

例如，以下规则：

div{显示：块；边框：虚线；}
div:：外部{显示：块；边框：虚线；}
div:：外部（2）{显示：块；边框：虚线；}

…将导致以下渲染对象：

，---------------------------。⁺对于
：：外部