目前,我正在使用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/