html - CSS 子选择器 - 需要定位子元素

Question

我对 css 选择器相当陌生，但我有一个 html 结构，其中包含我需要选择的子元素。我尝试了几种方法，但我很难只选择我需要的元素。预先回答:HTML是由第三方软件添加的，我无法以任何方式修改它。这包括向元素添加类。

这是HTML

<div class="smith-category-menu">
    <div>
        <div>
            <table></table>
            <div>
                <table></table>
            </div>
            <table></table>
            <div>
                <table></table>
            </div>
        </div>
    </div>
</div>

我需要能够选择以下内容:

<div class="smith-category-menu">
    <div>
        <div>
            <table SEELCT1></table>
            <div SELECT2>
                <table SELECT3></table>
            </div>
            <table SELECT4></table>
            <div SELECT5>
                <table SELECT6></table>
            </div>
        </div>
    </div>
</div>

我试过 div.smith-category-menu div div table 和 div.smith-category-menu div div table:first-child 但它们都是还选择了奇怪的元素。

如有任何帮助，我们将不胜感激!

Answer 1

您可以使用:

div.smith-category-menu>div>div * {
    border:1px solid #aa0000;
}

See this demo.