快速瞭解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
(本篇完)