目前,我正在使用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”单元格,但不是所有的表。我为此使用哪种选择器?

最佳答案

这将解决您的问题:

#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可能只显示桌面上的所有列,而使用Mobile First方法在移动设备上隐藏不那么重要的代码:

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

关于css - 选择具有共同 parent 的多个单元格,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/34941961/

10-10 18:41
查看更多