是否有一种优雅的方法来定位一系列嵌套元素？

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 - 才能使样式停止在#inner继承。

我唯一想到的就是：

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

那太可怕了。有没有一些更明智的方法来做到这一点？

Answer 1

将所有子项div s inline和#inner设置为阻止。

#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;}
}