有时我想在其他几个
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标签是包含上面代码的页面总是与< tag ...>的页面完全相同的标签.和< / tag>线被删除,或注释掉：
<!-- <tag id="just-a-handy-wrapper"> -->
<div ...>
...
</div>
...
<div ...>
...
</div>
<!-- </tag> -->
例如,div不是“布局中立”(浏览器通常会对如何布局div有强烈的想法),因此将tag设置为div是不行的.这是一个简单的例子：
> original
> with <div> wrapper around two of the three blue
rectangles
