Lala Code

Lala 的前端大補帖，歡迎一起鑽研前端技術😊

0%

Day8-選擇器列表-多重選擇，一次完成！

發表於 分類於 Disqus：

Selector List

選擇器列表（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%;
}

Selector List

💠總結

  • 選擇器列表可以將多個選擇器組合起來，共享相同的樣式。
  • 選擇器列表有兩種寫法：直接用逗號隔開，若包含無效選擇器，將導致所有樣式無效；或使用 :is 偽類，忽略無效選擇器，應用有效樣式。


🚀實體工作坊分享

玩轉 Web頁面的前端技術(HTML/CSS/JS) 一日體驗課

最近時賦學苑開了實體體驗課，即使你對程式碼沒有概念也能上手！Lala 會帶你一起做出一個個人品牌形象網站，帶你快速了解前端的開發流程，快跟我們一起玩轉 Web 吧！



🚀線上課程分享

線上課程可以加速學習的時間，省去了不少看文件的時間XD，以下是我推薦的一些課程
想學習更多關於前後端的線上課程，可以參考看看。

Hahow

Hahow 有各式各樣類型的課程，而且是無限次數觀看，對學生或上班族而言，不用擔心被時間綁住



六角學院

如果你是初學者，非常推薦六角學院哦！
剛開始轉職也是上了六角的課，非常的淺顯易懂，最重要的是，隨時還有線上的助教幫你解決問題！


Udemy

Udemy 裡的課程非常的多，品質普遍不錯，且價格都滿實惠的，CP值很高！
也是很多工程師推薦的線上課程網站。
❤️