html - 是否有一个完全为 "layout-neutral"的 HTML 容器元素？

Question

有时我想在其他几个 HTML 元素周围放置一个包装器元素，唯一的目的是设置一个方便的 CSS 选择器来引用所有包含的元素:

<TAG id="just-a-handy-wrapper">
    <abc ...>
        ...
    </abc>
    ...
    <pqr ...>
        ...
    </pqr>
</TAG>

...在 CSS 中:

#just-a-handy wrapper * {
    ...
}

我发现这比为 #just-a-handy wrapper * 捕获的所有元素分配一个公共(public)类的替代方案更容易管理和维护。上面的选择器。

在这个例子中，我使用了虚构的标签 <abc> , ..., <pqr>等，因为所包含的元素强调了一个事实，即我正在寻找一种解决方案，无论内容中特定标签的性质如何。

我还使用了虚构的标签 TAG作为所需“包装标签”的占位符，因为我的问题恰恰是关于用于此目的的最佳 HTML 标签。我所说的“最佳”是指它在有效 HTML5 中可以包含的元素类型中最“通用”，以及“布局最中性”。

IOW，理想的 HTML 标记应该是包含上述代码的页面始终完全呈现为与 <tag ...> 相同的页面。和 </tag>行被删除或注释掉:

<!-- <tag id="just-a-handy-wrapper"> -->
    <div ...>
        ...
    </div>
    ...
    <div ...>
        ...
    </div>
<!-- </tag> -->

A div ，例如，不是“布局中立的”(浏览器通常对如何布局 div 有很强的想法)，因此设置 tag 是行不通的。等于div .这是一个简单的例子:

• original
• with <div> wrapper around two of the three bluerectangles

Answer 1

是的，有一个CSS major browsers 支持的

display: contents

例如 <section class="container"><div>Parent is virtually not rendered</div></section>

.container {
   display: contents;
}