Question

有时我想在其他几个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作为所需＆＃34;包装标记＆＃34;的占位符，因为我的问题正是关于用于此目的的最佳HTML标记。通过＆＃34; best＆＃34;我的意思是大多数＆＃34;普遍＆＃34;在有效的HTML5中可以包含的元素类型，以及＆＃34;大多数布局中立的＆＃34;。

IOW，理想的HTML标记是包含上面代码的页面总是完全与<tag ...>和</tag>行所在的那个相同的HTML标记删除或注释掉：

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

例如，div不是＆＃34;布局中立＆＃34; （浏览器通常会对如何布局div有强烈的想法），因此将tag设置为等于div是不可行的。这是一个简单的例子：

Answer 1

抱歉，我担心没有这样的标签。

想象一下，您的<abc>或<pqr>标记是块级标记，比如说<p>标记。为了满足您的要求（布局应该相同，如果标签存在与否），容器标签需要是符合w3c标准的块级标签，并且它不应具有任何默认样式。据我所知，<div>很明显。

现在想象一下，<abc>或<pqr>是<i>或<b>等内嵌标签的情景。为了满足您的要求，容器标签本身需要是内联标签，否则会破坏该行。

现在问题是标签不可能同时处于内联和块级别。

并回答有关最通用标签的问题：使用div作为块级内容的容器，并使用span作为内联内容的容器。这些标签是为此目的而制作的。

Answer 2

来自w3c Visual Formatting Model document：

正常流程中的框属于格式化上下文，可以是block或inline，但不能同时为

在你的小提琴中，text-align: center;元素上的.outer规则不再适用于.inner元素，一旦有一个包装元素分层，就会证明缺少布局中立性它们。

我知道你更喜欢说一般性，强调你对布局中性标签的看法，但由于所有HTML元素都必须有格式化上下文，所以总会产生副作用向标记添加更多标记。（在这种情况下，您的<div>代码为block。）

大多数情况下，没有视觉问题，但只要您的布局取决于格式化上下文，添加更多元素将始终与您拥有布局中性标记背道而驰。

我会回应@Mario A的答案，你需要用标签布局中性包装标签，用block和<div>标签包裹inline标签，{{1 ，以免引入可能破坏你的布局的新格式化上下文。

Answer 3

是的，有CSS支持的major browsers

display: contents

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

.container {
   display: contents;
}

Answer 4

<span>是布局中性的，但它取决于哪些类型的元素在其中，例如它不能包含像<div>这样的块元素。元素是否呈现为块取决于元素，但可以指定，例如<div style="display:inline-block">或<div style="display:table-cell">以不同方式显示。

由于它是一个CSS问题，您可以在元素上使用ID来添加额外的CSS规则，或者将几个不同的类应用于一个ID。 EG

<div id="mydiv" class="blacktext">helloo</div>
<div class="blacktext class2">hello</div> <!-- apply class blacktext and class2-->

CSS

.class2 {background-color：＃FF0000;}

<强>参考

[1] the <span> tag

标记用于对文档中的内联元素进行分组。
标签本身不提供视觉变化。
标记提供了一种向文本的一部分或文档的一部分添加钩子的方法。

[2] span vs div

回答有关inline-block，block和inline与<span>和`比较

的stackoverflow

Answer 5

没有这样的标签，应该很好。

某些标记（如fieldset）具有影响子元素的行为，但也不需要进行任何渲染。 fieldset，禁用时，将禁用所有子输入元素，并且非常有用。但是，您无法专门将其包裹在<tr>周围，因为需要进行渲染。

是否存在完全＆＃34;布局中立的＆＃34; HTML容器元素？

5 个答案: