html - 如何选择没有 firstChild 或 nth-child() 的 child 的 child ？

Question

我有一个这样的表:

<div id="unique_id">
    <div></div>
    <div>
        <div>
            <div class="common_class">
                <table>
                </table>
            </div>
        </div>
    </div>
</div>

我想选择 common_class 中的表，但是，我正在选择其他东西。我想要这样的东西:

#unique_id > .common_class > table

但是，这不起作用。为此，div.common_class 必须是 div#unique_id 的子级。

注意:我必须支持 IE7，所以没有 nth-child() 选择器。另外，我试图避免使用 javascript。注意:允许使用 firstChild，但我正在寻找某个点的第二个 div。

GC

Answer 1

#unique_id > .common_class 要求 .common_class 是 #unique_id 的直接子级(并且这不是你的情况)。

只要避免那里的>:

#unique_id .common_class > table {
  width: 100px;
  height: 100px;
  border: 1px solid red;
}

<div id="unique_id">
    <div></div>
    <div>
        <div>
            <div class="common_class">
                <table>
                </table>
            </div>
        </div>
    </div>
</div>

或者使用精确树:#unique_id > div > div > .common_class > table(但你真的不应该使用这个一种 CSS)。