css - 在 Pre 标签中包装一个 DIv

Question

我有以下 HTML 代码:

<div class="_idGenObjectLayout-3">   
    <div id="_idContainer063" class="Code-Box">
                    <p class="Code">$.ajax({</p>
                    <p class="Code">  type: “GET”,</p>
                    <p class="Code">  url: “/myurl”,</p>
                    <p class="Code">  dataType: “json” // text, html, xml</p>
                    <p class="Code">})</p>
    </div>
</div>

我可以使用 CSS 自动将所有带有 class='Code-box' 的 div 包装在 <pre> 中吗？标签？

预期输出:

<div class="_idGenObjectLayout-3">
      <pre><div id="_idContainer063" class="Code-Box">
                            <p class="Code">$.ajax({</p>
                            <p class="Code">  type: “GET”,</p>
                            <p class="Code">  url: “/myurl”,</p>
                            <p class="Code">  dataType: “json” // text, html, xml</p>
                            <p class="Code">})</p>
    </div></pre>
</div>

此外，我希望类='Code-box' 的 div 内所有 para 的行之间没有空格。

如何实现这两个要求？

Answer 1

简短的回答，不，你不能用 CSS 包装一个带有新元素的元素，CSS 不会在 DOM 中起作用。

但是你仍然可以这样做来使你的 div 看起来像 pre:

.Code-Box {
    display: block;
    unicode-bidi: embed;
    font-family: monospace;
    white-space: pre;
}

要删除 p 中的空格，您可以删除边距和填充:

.Code-Box p {
    margin: 0;
    padding: 0;
}