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元素的子元素，而是所有元素的子元素。

A不知道#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可能只显示桌面上的所有列，并且使用Mobile First方法隐藏在移动设备上不太重要：

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

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

1 个答案: