Lala Code

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

0%

Day7-交集選擇器-一次選擇，多重考量

發表於 分類於 Disqus：

Intersection Selector

接下來會開始介紹各種複合選擇器，複合選擇器是指將多個基本選擇器組合在一起，我們可以更精確地選擇特定的 HTML 元素。這些選擇器可以基於元素的類別、結構、層次關係等條件來篩選元素，本篇將聚焦於交集選擇器。

交集選擇器（Intersection Selector）用於選中同時符合多個條件的元素，可以根據需要，選擇不同的組合來選中特定的元素。



💠 交集選擇器-基本用法

語法

1
2
3
選擇器1選擇器2選擇器3…選擇器n {
  屬性名: 屬性值;
}
  • 將多個選擇器無間隔連接在一起，以選擇同時滿足所有條件的元素。

範例

1
2
3
4
<p>什麼都沒有</p>
<p class="rich">財富自由</p>
<p class="beauty">美貌天仙</p>
<p class="rich beauty">財富自由又美貌天仙</p>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
p {
  padding: 10px;
}

.rich {
  background-color: gold;
}

p.beauty {
  background-color: pink;
}

.rich.beauty {
  background-image: linear-gradient(gold, pink);
}

Intersection Selector

舉個符合人生的例子，當 class 為 rich 時，我們的背景就會是閃閃發光的金黃色；當元素為 <p> 而且類別為 beauty 時，背景會是粉色；而既 rich 又 beauty 時，背景就會呈現金粉漸層！簡直就是人生勝利組呀~~~😆

但交集選擇器不建議連接過多的選擇器，例如：

1
p#title.rich.beauty.bad { ... }

一次要太多的結果就會變成這樣，寫法看起來會過於複雜，影響代碼的可讀性和維護性。為了保持代碼清晰，應避免使用過於複雜的選擇器組合。



💠 實務應用：當前頁籤

大家應該很常看到有些可以切換的內容，在我們切換頁籤時，當前的頁籤就會高亮顯示。

Intersection Selector

比方說上圖的 iT 邦幫忙的技術問答區塊，右上角的頁籤，點擊切換後，當前頁籤就會呈現藍色，像這種狀態，我們也可以用交集選擇器來做：

1
2
3
4
5
6
7
8
9
10
11
<ul>
  <li>
    <a href="/" class="active">最新</a>
  </li>
  <li>
    <a href="/">熱門</a>
  </li>
  <li>
    <a href="/">已解決</a>
  </li>
</ul>
1
2
3
4
5
6
7
8
9
10
11
12
a {
  padding: 10px 20px;
  color: #62808f;
  background-color: #d5dfe3;
  text-decoration: none;
}

a.active {
  color: #fff;
  font-weight: bold;
  background-color: #00a0e9;
}

當 <a> 元素擁有 active 類別時，該頁籤會變為藍色。當然切換的部份還是得靠 JS 來做，這邊有做了切換效果，讓大家可以感受一下。簡單來說，就是切換時將 class 加上 active 類別就搞定囉！

See the Pen Intersection selector2 by Lala (@bobee) on CodePen.

其實 CSS 用法非常多，像這樣的效果也可以通過其它方法實現，例如直接給當前頁籤添加 .menu-active 類別：

1
2
3
4
5
6
7
8
9
10
11
<ul>
  <li>
    <a href="/" class="menu-active">最新</a>
  </li>
  <li>
    <a href="/">熱門</a>
  </li>
  <li>
    <a href="/">已解決</a>
  </li>
</ul>
1
2
3
4
5
6
7
8
9
10
11
12
a {
  padding: 10px 20px;
  color: #62808f;
  background-color: #d5dfe3;
  text-decoration: none;
}

.menu-active {
  color: #fff;
  font-weight: bold;
  background-color: #00a0e9;
}

💠 總結

  • 交集選擇器用於當元素同時符合多個條件時呈現特定樣式。
  • 為了保持代碼的可讀性和可維護性，應謹慎使用過於複雜的選擇器組合
  • 交集選擇器可以用於當前頁籤的效果，但不一定非要使用交集選擇器。


🚀線上課程分享

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

Hahow

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



六角學院

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


Udemy

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