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

请参阅此演示。