Lala Code

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

0%

Day23-:not 不選擇的藝術，如何用 CSS 控制排除

發表於 分類於 Disqus：

:not

:not 選擇器可以選取不符合指定選擇器的元素，主要功能是排除符合特定選擇器的元素，這讓我們能夠將樣式應用於那些不符合條件的元素，也稱為是「反選偽類」或「否定偽類」(negation pseudo-class)。



💠:not 基本用法

語法

1
2
3
選擇器:not(排除的選擇器) {
  屬性名: 屬性值;
}
  • 選取「不符合」指定選擇器的元素

範例一：排除特定類別的元素

假設我們想要將所有 <p> 元素設置成藍色，但排除 class="apple" 的段落：

1
2
3
4
<p>空白段落</p>
<p class="apple">apple</p>
<p class="not-apple">not-apple</p>
<div class="apple">apple</div>
1
2
3
p:not(.apple) {
  color: royalblue;
}

排除特定類別的元素

除了具有 apple 類別的段落，其他 <p> 會變成藍色。



範例二：排除特定屬性的元素

選中 <div> 底下的子元素 <p>，但排除 title 屬性值以 apple 開頭的元素

1
2
3
4
5
<div>
  <p title="apple">🍎title is apple</p>
  <p>apple</p>
  <p title="not-apple">not-apple</p>
</div>
1
2
3
div > p:not([title^="apple"]) {
	color: royalblue;
}

排除特定屬性的元素

只有 title 不是以 apple 開頭的 <p> 會變成藍色



範例三：排除第一個子元素

選中 <div> 底下的子元素 <p>，但排除第一個子元素，只有不是第一個的 <p> 元素將會變為藍色

1
2
3
4
5
<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>
1
2
3
ul > li:not(:first-child) {
	color: royalblue;
}

排除第一個子元素



💠:not 的無效或不合理用法

一、排除所有元素

不管怎樣永遠都不會有任何元素選中，很顯然這種寫法是很不合理的

1
2
3
:not(*) {
  color: red;
}


二、沒有選擇任何選擇器，並排除所有有 apple 的類別

1
<p class="apple">apple</p>
1
2
3
:not(.apple) {
  background-color: skyblue;
}

not

你會發現，apple 類別背景色還是變色了，這其實不是無效，是因為排除 apple 類別也包含了 <html>、<body> ，所有沒有 apple 類別的元素都會被加上背景色



三、後代選擇器的使用

1
2
3
4
5
6
7
8
9
10
11
<div>
  <a href="#">div 的 a 元素</a>
</div>

<div>
  <p>
    <a href="#">div p 的 a 元素</a>
  </p>
</div>

<a href="#">一般的 a 元素</a>
1
2
3
body :not(div) a {
  color: red;
}

not


如果你是這樣寫，將會選中非 <div> 包住的 <a>

  • 第一行的 <a> 不會被選中，因為是 <div> 包住的 <a> ，這沒什麼疑慮
  • 第二行的 <a> 文字將會變成紅色，這是因為 <p> 也符合 :not(div) 的條件
  • 第三行的 <a> 不會被選中，因為它並沒有被任何元素包住

如果想排除 <div> 下所有的 <a>，你應該這樣寫

1
2
3
body :not(div a) {
  color: red;
}

not

這麼一來，所有在 <div> 底下的 <a> 都會被排除



四、選擇器列表使用到無效的選擇器，將全部無效

1
2
3
4
<div>
  <p class="apple">🍎apple</p>
  <p>not-apple</p>
</div>
1
2
3
4
p:not(.apple, :invalid-pseudo-class) {
  color: red;
  font-style: italic;
}

not


還記得我們在選擇器列表時講的嗎？如果希望忽略無效的選擇器，讓有效選擇器執行效果，我們應該使用 :is

1
2
3
4
p:not(:is(.apple, :invalid-pseudo-class)) {
  color: red;
  font-style: italic;
}

not

如此一來，就可以選中排除 apple 類別的 <p> 囉！



💠 實務應用：按鈕樣式

一起試試：［CODEPEN］

我們可以使用 :not() 為不同按鈕類型設定樣式。例如，對一般按鈕設置一種樣式，對提交按鈕設置另一種樣式：

1
2
3
<button type="button">按鈕 1</button>
<button type="button">按鈕 2</button>
<button type="submit">提交按鈕</button>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
button:not([type="submit"]) {
  background-color: skyblue;
  color: white;
  border: none;
  border-radius: 6px;
  padding: 10px 20px;
  margin: 5px;
  cursor: pointer;
}

button[type="submit"] {
  background-color: green;
  color: white;
  border: none;
  border-radius: 6px;
  padding: 10px 20px;
  margin: 5px;
  cursor: pointer;
}

not

type="button" 的按鈕會有藍色背景，而 type="submit" 的按鈕會有綠色背景

💠 總結

:not 選擇器可以精確地排除特定元素，它能用來處理類別、屬性或是結構選擇器，讓我們在設計複雜的頁面時有更多控制力，使用它可以避免不必要的重複選擇器。



🚀實體工作坊分享

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

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



🚀線上課程分享

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

Hahow

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



六角學院

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


Udemy

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