是否存在完全“布局中立”的 HTML 容器元素？

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

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

...以及在 CSS 中：

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

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

在此示例中，我使用了虚构标签<abc>, ..., <pqr>等，对于所包含的元素，强调这样一个事实：我正在寻找一种无论内容中特定标签的性质如何都有效的解决方案。

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

IOW，理想的 HTML 标签是始终呈现包含上述代码的页面的标签exactly与其中的一个相同<tag ...> and </tag>行被删除或注释掉：

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

A div，例如，不是“布局中立”（浏览器通常对如何布局div），因此它不会做设置tag等于div。这是一个简单的例子：

• original http://jsfiddle.net/0j2vtj46/
• with <div>三个蓝色中的两个的包装纸 矩形 http://jsfiddle.net/sr04wnmz/

是的，有一个CSS https://developer.mozilla.org/en-US/docs/Web/CSS/display对于支持的主要浏览器 https://caniuse.com/#feat=css-display-contents

display: contents

E.g. <section class="container"><div>Parent is virtually not rendered</div></section>

.container {
   display: contents;
}