快速瞭解CSS新出的列選擇符雙管道（||）
byzhangxinxu from https://www.zhangxinxu.com/wordpress/?p=8475
本文可全文轉載，個人網站無需授權，只要保留原作者、出處以及文中連結即可，任何網站均可摘要聚合，商用請聯絡授權。
瞭解列選擇符
示例用法：
col.selected || td {
background-color: skyblue;
}
平時我們用過空格， > , + 和 ~ ，現在出來個雙管道 || ，是不是沒見過，這個雙管道 || 就是本文要介紹的列選擇符。
列選擇符是規範中剛出現不久的新選擇符，目前瀏覽器的相容性還不足以實際專案中應用，因此本文僅簡單介紹下，讓大家知道大致是幹什麼用的。
在Table佈局和Grid佈局中都有列的概念，有時候我們希望控制整列的樣式。有兩種方法，一種是藉助 :nth-col() 或者 :nth-last-col() 偽類，不過這兩個偽類目前瀏覽器尚未支援；還有一種是藉助原生Table佈局中的 <colgroup> 和 <col> 元素實現，這個相容性非常好。
我們通過一個簡單例子快速瞭解下這兩個元素，如下表格HTML程式碼：
<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>
可以看出表格共有5列。其中， <colgroup> 元素中有3個 <col> 元素，從 span 屬性值可以看出，這3個 <col> 元素分別佔據1列，2列和2列。此時，我們給後面2個 <col> 元素設定背景色，就可以看到背景色作用在整列上了，CSS如下：
.ancestor {
background-color: dodgerblue;
}
.brother {
background-color: skyblue;
}
最終效果如下圖：
但是，有時候，我們的單元格並不是正好屬於某一列，而是跨列，此時， <col> 元素是會忽略這些跨列元素的。舉個例子：
<table border="1" width="200"> <colgroup> <col span="2"> <col class="selected"> </colgroup> <tbody> <tr> <td>A</td> <td>B</td> <td>C</td> </tr> <tr> <td colspan="2">D</td> <td>E</td> </tr> <tr> <td>F</td> <td colspan="2">G</td> </tr> </tbody> </table>
col.selected {
background-color: skyblue;
}
此時僅C和E兩個單元格有天藍色的背景色，G單元格雖然也覆蓋了第3列，由於同時也屬於第2列，於是被無視了，效果如下圖：
這就有問題了，很多時候，我們就是要G單元格也有背景色的，只要包含該列，都認為是目標物件。為了應對這種需求，列選擇符應運而生了。
列選擇符寫作雙管道 || ，是兩個字元，和JavaScript語言中的邏輯或寫法一致，但是，在CSS中卻不是“或”的意思，用“屬於”解釋要更恰當。
通過如下CSS選擇器，可以讓G單元格也有背景色：
col.selected || td {
background-color: skyblue;
}
col.selected || td 意思就是選擇所有屬於 col.selected 的 <td> 元素，哪怕這個 <td> 元素橫跨多列。
於是，我們可以看到如下圖所示的效果：
本文內容就這些，結束！
本文為原創文章，會經常更新知識點以及修正一些錯誤，因此轉載請保留原出處，方便溯源，避免陳舊錯誤知識的誤導，同時有更好的閱讀體驗。
本文地址： https://www.zhangxinxu.com/wordpress/?p=8475
（本篇完）