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

看这个演示。

Answer 2

如果这是确切的结构，您可以使用此选择器：

div.smith-category-menu > div > div * {
    ...
}

或者您可以稍微编辑 HTML：

<div class="smith-category-menu">
    <div>
        <div>
            <table class="old-classes select-me"></table>
            <div class="old-classes select-me">
                <table class="old-classes select-me"></table>
            </div>
            <table class="old-classes select-me"></table>
            <div class="old-classes select-me">
                <table class="old-classes select-me"></table>
            </div>
        </div>
    </div>
</div>

并使用：

div.smith-category-menu .select-me {
    ...
}

Answer 3

在选择器中仅使用一个空格，例如

div table {
    ...
}

将选择 div 后代中的所有表格元素，而不仅仅是其直接后代。使用“>”将仅选择直接后代。

div > table {
   ...
}