能否让CSS忽略HTML元素但保留其子元素正常布局？

摘要 #

能否让CSS忽略某个HTML元素，但不影响其子元素？即该元素在CSS中被视为不存在，而其子元素仍正常处理，直接作为该元素父元素的子元素。

详情与动机 #

假设我们有一个使用display: flex实现的布局：

<div class="outer"><!-- this one has display: flex (just example) -->
  <div class="inner">Foo</div>
  <div class="inner">Bar</div>
  <div class="inner">Baz</div>

  <div class="inner">Foo 2</div>
  <div class="inner">Bar 2</div>
  <div class="inner">Baz 2</div>
</div>

但之后出于语义化或其他原因，需要将一组inner元素包裹进form或nav标签：

<div class="outer">
  <div class="inner">Foo</div>
  <div class="inner">Bar</div>
  <div class="inner">Baz</div>

  <form>
    <div class="inner">Foo 2</div>
    <div class="inner">Bar 2</div>
    <div class="inner">Baz 2</div>
  </form>
</div>

这会破坏原本的flex布局，因为<form>成为了outer的子元素，与前三个inner元素同级。

核心问题：

• 能否让form这类元素被CSS忽略，就像它不在HTML元素树中一样？
• 如果无法实现，该特性是否曾被考虑、开发或否决过？

内容的提问来源于stack exchange，提问作者mrkvon