css - 选择具有共同父项的多个单元格

Question

目前我正在使用 CSS:

#myTable > td:nth-child(2), td:nth-child(5), td:nth-child(6), td:nth-child(7), td:nth-child(10), td:nth-child(14), td:nth-child(15), td:nth-child(16) {
    display : none;
}

但这只是隐藏了表格“myTable”的第二个单元格，并隐藏了所有其他表格的“5,6,7..,16”单元格。

我想隐藏“myTable”的“2,5,6,7,..16”单元格，但不是我的所有表格。我为此使用哪种选择器？

Answer 1

这将解决您的问题:

#myTable > td:nth-child(2),
#myTable > td:nth-child(5),
#myTable > td:nth-child(6),
#myTable > td:nth-child(7),
#myTable > td:nth-child(10),
#myTable > td:nth-child(14),
#myTable > td:nth-child(15),
#myTable > td:nth-child(16) {
    display : none;
}

, 等同于 OR 因此如果您不在每个选择器上添加 #myTable，您将无法仅选择 #myTable 的子项 元素但是所有元素的子元素。

不知道 #myTable 的位置是什么，但这只有在父元素上才有效，所以 tr 元素。因为使用>比较慢，也许只有这个有用。

#myTable td:nth-child(2),
#myTable td:nth-child(5),
#myTable td:nth-child(6),
#myTable td:nth-child(7),
#myTable td:nth-child(10),
#myTable td:nth-child(14),
#myTable td:nth-child(15),
#myTable td:nth-child(16) {
    display : none;
}

或者，可能有一个原因，因为这个 td 必须不可见，例如，因为有一些不太重要的东西:

<table class="my-table">
    <tr>
        <td>Column 1</td>
        <td class="less-important">Column 2</td>
        <td>Column 3</td>
        <td>Column 4</td>
        <td class="less-important">Column 5</td>
        <td class="less-important">Column 6</td>
        <td class="less-important">Column 7</td>
        <td>Column 8</td>
        <td>Column 9</td>
        <td class="less-important">Column 10</td>
        <td>Column 11</td>
        <td>Column 12</td>
        <td>Column 13</td>
        <td class="less-important">Column 14</td>
        <td class="less-important">Column 15</td>
        <td class="less-important">Column 16</td>
    </tr>
</table>

并且您的 CSS 可能只在桌面上显示所有列，并使用移动优先方法在移动设备上隐藏不太重要的列:

.my-table .less-important {
    display: none;
}
@media (min-width: 768px) {
    .my-table .less-important {
        display: table-cell;
    }
}