#书摘 #css #前端
《CSS 选择器世界》第5章 精通CSS选择符
5. 快速了解列选择符——双管道(||)
列选择符是规范中刚出现不久的新选择符
Table布局和Grid布局中都有列的概念。有时候我们希望控制整列的样式，有两种方法：一种是借助
很多时候，我们需要G单元格也有背景色，即只要包含目标列，就认为是目标对象。为了应对这种需求，列选择符应运而生。
列选择符写作双管道(||)，但是在CSS中不是“或”的意思，用“属于”来解释更为恰当。
通过如下CSS选择器，可以使G单元格也有背景色：
《CSS 选择器世界》第5章 精通CSS选择符
5. 快速了解列选择符——双管道(||)
列选择符是规范中刚出现不久的新选择符
Table布局和Grid布局中都有列的概念。有时候我们希望控制整列的样式，有两种方法：一种是借助
:nth-col() 或者 :nth-last-col() 伪类，不过目前浏览器尚未支持这两个伪类；另一种是借助原生 Table 布局中的 <colgroup> 和 <col> 元素实现，这个方法的兼容性非常好。很多时候，我们需要G单元格也有背景色，即只要包含目标列，就认为是目标对象。为了应对这种需求，列选择符应运而生。
列选择符写作双管道(||)，但是在CSS中不是“或”的意思，用“属于”来解释更为恰当。
<table border="1" width="600">
<colgroup>
<col>
<col span="2" class="ancestor">
<col span="2" class="brother">
</colgroup>
<tr>
<td></td>
<th scope="col">后代选择符</th>
<th scope="col">子选择符</th>
<th scope="col">相邻兄弟选择符</th>
<th scope="col">随后兄弟选择符</th>
</tr>
<tr>
<th scope="row">示例</th>
<td>.foo .bar {}</td>
<td>.foo > .bar {}</td>
<td>.foo + .bar {}</td>
<td>.foo ~ .bar {}</td>
</tr>
</table>
通过如下CSS选择器，可以使G单元格也有背景色：
col.selected || td {
background-color: skyblue;
}
col.selected || td <td> 元素，哪怕这个 <td> 元素横跨多个列。