html - 有没有一种优雅的方法来定位一系列嵌套元素？

Question

我必须在基于 Web 的应用程序中设置小部件的样式，这是前端开发人员对嵌套 div 的噩梦:

<div id="outer">
  <h3>Title stuff</h3>
  <div>
    <div>
      <div>
        <div>
          <div id="inner">
            <div>Elements that shouldn't inherit any stuff from those ugly nested divs</div>
            <div></div>
            <div></div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="buttons">
    <button>Prev</button>
    <button>Next</button>
  </div>
</div>

我需要中间的 div - 在 #outer 和 #inner 之间没有类或 id 的 div - 具有在 停止继承的样式#内部。

我唯一能想到的是:

#outer > div,
#outer > div > div,
#outer > div > div > div,
#outer > div > div > div > div { display: inline; }

太可怕了。有没有更巧妙的方法来做到这一点？

Answer 1

将所有子div设置为inline，然后将#inner设置为 block 。

#outer div {display: inline;}
#outer #inner, #inner div {display: block}

编辑:
由于下面的评论，

#inner {
    border: 1px solid red;
    overflow: scroll;
    height: calc(100% - 5em);
    display: block;

    div {display: block;}
}