選擇器列表(Selector List),又稱「分組選擇器」或「並集選擇器」,允許多個選擇器共享相同的樣式。
其實就像在一場派對上分組一樣,你可以把喜歡狗的人放在一邊,他們有球、飛盤、牽繩;另一邊是愛貓的人,他們帶著逗貓棒、貓草、小魚乾。不管是哪一組,大家都用相同的樣式『裝扮』自己,無論是毛茸茸的朋友還是主人,這就是分組選擇器的魅力~
💠選擇器列表-基本用法
語法
- 選擇器列表有兩種寫法,可以使用逗號隔開選擇器,或使用
:is
虛擬類別選擇器
寫法一:用逗號隔開選擇器
1 2 3
| 選擇器1, 選擇器2, 選擇器3,…選擇器n { 屬性名: 屬性值; }
|
寫法二:使用 :is
虛擬類別選擇器
1 2 3
| :is(選擇器1, 選擇器2, 選擇器3,…選擇器n) { 屬性名: 屬性值; }
|
範例
假設我們有相同樣式的 <span>
和 <div>
元素,初學者可能會這樣寫:
1 2 3 4 5 6 7
| span { border: red 2px solid; }
div { border: red 2px solid; }
|
使用選擇器列表可以直接讓它們共享樣式
1 2 3 4
| span, div { border: red 2px solid; }
|
或使用 :is
1 2 3
| :is(span, div) { border: red 2px solid; }
|
這兩種寫法在上述範例中效果相同,但在某些情況下會有不同的結果。例如,當選擇器列表中包含無效選擇器時,如 div:invalid-pseudo
,這在 CSS 中是不存在的選擇器。如下所示,這種情況會導致所有樣式無效,<span>
和 <div>
都不會被加上樣式:
1 2 3 4 5
| span, div, div:invalid-pseudo { border: red 2px solid; }
|
然而,如果使用 :is
,無效選擇器會被忽略,而有效選擇器仍然會應用樣式:
1 2 3
| :is(span, div, div:invalid-pseudo) { border: red 2px solid; }
|
💠實務應用:共用相同樣式
還記得前面在類選擇器時用到的紅綠燈範例嗎?當初是使用多個類別來共享樣式:
1 2 3
| <div class="light red"></div> <div class="light yellow"></div> <div class="light green"></div>
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17
| .red { background-color: #d71919; }
.yellow { background-color: #ffe100; }
.green { background-color: #05a005; }
.light { width: 100px; height: 100px; border-radius: 50%; }
|
我們也可以使用選擇器列表來達成相同的效果:
1 2 3
| <div class="red"></div> <div class="yellow"></div> <div class="green"></div>
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17
| .red { background-color: #d71919; }
.yellow { background-color: #ffe100; }
.green { background-color: #05a005; }
.red, .yellow, .green { width: 100px; height: 100px; border-radius: 50%; }
|
也可以使用 :is
來實現:
1 2 3 4 5
| :is(.red, .yellow, .green) { width: 100px; height: 100px; border-radius: 50%; }
|
💠總結
- 選擇器列表可以將多個選擇器組合起來,共享相同的樣式。
- 選擇器列表有兩種寫法:直接用逗號隔開,若包含無效選擇器,將導致所有樣式無效;或使用
:is
偽類,忽略無效選擇器,應用有效樣式。
🚀線上課程分享
線上課程可以加速學習的時間,省去了不少看文件的時間XD,以下是我推薦的一些課程
想學習更多關於前後端的線上課程,可以參考看看。
Hahow 有各式各樣類型的課程,而且是無限次數觀看,對學生或上班族而言,不用擔心被時間綁住
如果你是初學者,非常推薦六角學院哦!
剛開始轉職也是上了六角的課,非常的淺顯易懂,最重要的是,隨時還有線上的助教幫你解決問題!
Udemy 裡的課程非常的多,品質普遍不錯,且價格都滿實惠的,CP值很高!
也是很多工程師推薦的線上課程網站。