iT邦幫忙

2023 iThome 鐵人賽

DAY 8
4
Modern Web

GPT 救救我!菜雞小海獺的前端成長之旅系列 第 8

D8 - CSS - 選擇器們 - 偽類(pseudo-class)

  • 分享至 

  • xImage
  •  

偽類(pseudo-class)

偽類也是一種選擇器,作用是選擇指定元素的特定狀態。一些偽類通常可以增加使用者體驗(User Experience,UX),例如使用者的滑鼠懸停時在指定元素上時(:hover)、區分連結是否已造訪過(:link & :visited)、用戶點擊或用 Tab 鍵選擇某 element 時的樣式(:focus)等等。

那怎麼知道誰是偽類咧?偽類的開頭都是一個冒號,後面接上屬性,例如上一段提到的 :hover、:link 等等。

偽類的類別

  • 輸入/編輯(Input pseudo-classes)

    • :read-only:只可讀取不可編輯
    • :disabled:選取「處在禁用狀態」的元素
  • 位置(Location pseudo-classes)

    • :target:跳轉到點擊處 href=#id 所指向的 id 位置。
  • (樹狀)結構下的偽類(Tree-structural pseudo-classes)

    • :nth-child
      • :nth-child(n):選取第 n 個元素。
      • :nth-child(an+b):自由搭配 a 與 b,以選取複數元素用。a&b 都是數字,a、b 可以是 0,n=0、1、2、...
    • :nth-of-type(n):選取同層中的第 n 個指定元素
      • 例:div:nth-of-type(5),指的是同層的第五個 div
  • 使用者行為(User action pseudo-classes)

    • :hover:使用者滑鼠懸停在指定目標上。

      • 觸控螢幕下使用 hover 可能會有問題。
      • 需注意的使用順序:先 :link → :visited → :hover → :active 後
    • :active:(瀏覽器會偵測)元素被使用者「啟動」時的狀態,這個狀態指的是==使用者按下滑鼠左鍵和鬆開左鍵之間的時間==。

      • 通常用在 a 跟 button 上
      • 若有左手專用的滑鼠,那(primary mouse button)就會是右鍵
    • :focus:指的是當前的「焦點」,這個焦點的觸發,可以由使用者點擊的、也可以是用 tab 選取的。

      • 常用在 button, input 等
  • 功能性(Functional pseudo-classes)

    • 以逗號(,)連接的選擇器們(selector list)作為參數
      • :not:使用時要注意,會有一些奇怪的錯誤/情況
      • :has()
    • 可包容錯誤的 selectors(forgiving selector list)作為參數。單一 selector 錯誤,不會影響到其他 selector 的解析。
      • :is():可以用來簡化一堆 selector
        • 會受 selector 的優先級影響
        • 多層使用下有點像陣列的配對(?)
        • 不接受含有偽元素的 selector
      • :where()

https://ithelp.ithome.com.tw/upload/images/20230910/20161801QakMCu4fFn.png
Fig. 1. 來實作一下吧!

範例 code 們

<h1>常見的偽類 psuedo-class 練習</h1>
<div class="box">
  <h2>輸入/編輯類</h2>
  <h3>:read-only</h3>
  <div class="inner-box">
    <p class="read-only">我會變 aquamarine 色</p>
  </div>
  <h3>:disabled</h3>
  <div class="inner-box">
    <div>
      <label>喜歡的動物:
        <select name="animals">
          <option>請選擇</option>
          <option value="lion">獅子</option>
          <option value="otter" selected>獺</option>
        </select>
      </label>
    </div>
    <div>
      <label>喜歡的水果:
        <select name="fruits" disabled>
          <option>請選擇</option>
          <option value="banana">香蕉</option>
          <option value="watermelon">西瓜</option>
        </select>
      </label>
    </div>
  </div>
  <h2>位置類</h2>
  <h3>:target</h3>
  <div class="inner-box">
    <div>
      <ul>
        <li>
          <a href="#para">去 p</a>
        </li>
        <li>
          <a href="#block">去 div</a>
        </li>
        <li>
          <a href="notdefined">找不到目標</a>
        </li>
      </ul>
    </div>
    <div>
      <p id="para">我是一個 p</p>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Placeat, nemo accusantium suscipit optio rem
        dolores odio repudiandae! Molestiae iusto delectus animi numquam perferendis? Aspernatur repudiandae, quae
        voluptas dolore eos ipsa?</p>
      <div id="block">我是一個div</div>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Placeat, nemo accusantium suscipit optio rem
        dolores odio repudiandae! Molestiae iusto delectus animi numquam perferendis? Aspernatur repudiandae, quae
        voluptas dolore eos ipsa?</p>
    </div>
  </div>
  <h2>結構用</h2>
  <h3>:nth-child(n)</h3>
  <h4><code>.test-nth div:nth-child(3)</code></h4>
  <div class="inner-box test-nth">
    <div>
      <p>一段話</p>
    </div>
    <div>
      <p>一段話</p>
    </div>
    <div>
      <p><code>.test-nth div:nth-child(3) { background: red; }</code></p>
    </div>
  </div>
  <h4><code>.test-nth>ul li:nth-child(2)</code></h4>
  <div class="inner-box test-nth">
    <ul>
      <li>幾個字</li>
      <li><code>.test-nth div:nth-child(2) { background: lightgreen; }</code></li>
      <li>幾個字</li>
      <li>幾個字</li>
    </ul>
  </div>
  <h3>:nth-child(an+b)</h3>
  <h4>2n+1=座號,座號符合 1, 3, 5, 7, ... 底色就會變</h4>
  <div class="inner-box test-nth-anb">
    <p>n=0, 2*0+1=1/nth 的座號:1</p>
    <p>n=1, 2*1+1=3/nth 的座號:2</p>
    <p>n=2, 2*2+1=5/nth 的座號:3</p>
    <p>n=3, 2*3+1=7/nth 的座號:4</p>
    <p>n=4, 2*4+1=9/nth 的座號:5</p>
    <p>n=5, 2*5+1=11/nth 的座號:6</p>
    <p>n=6, 2*6+1=13/nth 的座號:7</p>
    <p>n=7, 2*7+1=15/nth 的座號:8</p>
    <p>n=8, 2*8+1=17/nth 的座號:9</p>
    <p>n=9, 2*9+1=19/nth 的座號:10</p>
  </div>
  <h4>2n+0=座號,座號符合 2, 4, 6, ... 底色就會變</h4>
  <div class="inner-box test-nth-anzero">
    <p>n=0, 2*0+0=0/nth 的座號:1</p>
    <p>n=1, 2*1+0=2/nth 的座號:2</p>
    <p>n=2, 2*2+0=4/nth 的座號:3</p>
    <p>n=3, 2*3+0=6/nth 的座號:4</p>
    <p>n=4, 2*4+0=8/nth 的座號:5</p>
    <p>n=5, 2*5+0=10/nth 的座號:6</p>
    <p>n=6, 2*6+0=12/nth 的座號:7</p>
    <p>n=6, 2*7+0=14/nth 的座號:8</p>
    <p>n=6, 2*8+0=16/nth 的座號:9</p>
  </div>
  <h4>4n+1=座號,座號符合 1, 5, 9, ... 底色就會變</h4>
  <div class="inner-box test-nth-anfour">
    <p>n=0, 4*0+1=1/nth 的座號:1</p>
    <p>n=1, 4*1+1=5/nth 的座號:2</p>
    <p>n=2, 4*2+1=9/nth 的座號:3</p>
    <p>n=3, 4*3+1=13/nth 的座號:4</p>
    <p>n=4, 4*4+1=8/nth 的座號:5</p>
    <p>n=5, 4*5+1=10/nth 的座號:6</p>
    <p>n=6, 4*6+1=12/nth 的座號:7</p>
    <p>n=6, 4*7+1=14/nth 的座號:8</p>
    <p>n=6, 4*8+1=16/nth 的座號:9</p>
  </div>
  <span>也可以到 codepen 試試
    <a href="https://codepen.io/nekoboxy/pen/xxmbQvL?editors=1100" target="_blank">點我</a>
  </span>
  <h2>結構類</h2>
  <h3>:hover</h3>
  <div class="inner-box">
    <button type="button" class="test-hover">滑鼠來</button>
  </div>
  <h3>:active</h3>
  <div class="inner-box">
    <span>這是一個結合 <code>:hover</code> 跟 <code>:active</code> 的<a>例子</a>,點看看前面黃底色的字吧</span>
  </div>
  <h3>:focus</h3>
  <div class="inner-box">
    <input type="text" placeholder="點我嘛~">
    <div class="test-focus">
      <label>喜歡的動物:
        <select name="animals">
          <option>請選擇</option>
          <option value="lion">獅子</option>
          <option value="otter" selected>獺</option>
        </select>
      </label>
    </div>
  </div>
  <h2>功能類</h2>
  <h3>:is()</h3>
  <div class="inner-box test-is">
    <div class="box1">
      <h5>嗨</h5>
      <div class="box2">
        <h5>嗨</h5>
        <div class="box3">
          <h5>嗨</h5>
        </div>
      </div>
    </div>
  </div>
</div>
/* 下面兩個結果一樣 */
p[class="read-only"]:read-only {
  background-color: aquamarine;
}

/* .read-only:read-only {
  background-color: aquamarine;
} */

select:disabled {
  background-color: rgb(46, 46, 46);
  color: azure;
}

/* target */
p:target {
  background-color: gold;
}

/* 結合 ::before */
/* p:target::before {
  font: 70% sans-serif;
  content: "►";
  color: limegreen;
  margin-right: 0.25em;
} */

div:target {
  color: red;
  font-weight: 900;
}

/* nth-child*/
/* 選在 .test-nth 下的第二個 div */
.test-nth div:nth-child(3) {
  background: red;
}

/* 選在 .test-nth 下的 ul 中的第二個 li */
.test-nth > ul li:nth-child(2) {
  background: lightgreen;
}

/* 選取任何子層內的第三個項目 */
:nth-child(3) {
  background: yellow;
}

/* 在 指定 class 下的 p,符合條件的皆選取 */
.test-nth-anb p:nth-child(2n + 1),
.test-nth-anzero p:nth-child(2n + 0),
.test-nth-anfour p:nth-child(4n + 1) {
  background-color: rgb(151, 82, 101);
  color: white;
}

.test-hover:hover {
  background-color: brown;
  color: white;
}

.inner-box > span:hover {
  background-color: aquamarine;
}

span > a:active {
  color: aliceblue;
  font-weight: 900;
  background-color: darkgreen;
}

.inner-box > input:focus {
  background-color: aquamarine;
}

.test-focus select:focus {
  background-color: burlywood;
}

.test-is :is(.box1, .box2, .box3) h5 {
  background-color: darkgreen;
  color: white;
}

備註:pseudo-class 種類繁多,上面僅列出部分,若有其他需求,可自行上 MDN 查找。

下一篇文章的主題是 偽元素

ps 雖然不知道是哪位大大收藏的,但您激勵了這隻菜雞獺,非常感謝您!! m(_ _)m
https://ithelp.ithome.com.tw/upload/images/20230909/20161801nvN1n62rDv.jpg


參考資料

  • Pseudo-classes and pseudo-elements - Learn web development | MDN,https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements
  • 伪类 - CSS:层叠样式表 | MDN,https://developer.mozilla.org/zh-CN/docs/Web/CSS/Pseudo-classes
  • CSS Pseudo-classes,https://www.w3schools.com/css/css_pseudo_classes.asp
  • CSS 选择器 - CSS:层叠样式表 | MDN,https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_selectors#%E5%9F%BA%E6%9C%AC%E9%80%89%E6%8B%A9%E5%99%A8
  • Pseudo-classes - CSS: Cascading Style Sheets | MDN,https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes#linguistic_pseudo-classes
  • :nth-child - CSS:层叠样式表 | MDN,https://developer.mozilla.org/zh-CN/docs/Web/CSS/:nth-child
  • CSS :nth-child() Selector,https://www.w3schools.com/cssref/sel_nth-child.php

上一篇
D7 - CSS - 選擇器們 - 基本、分組與組合
下一篇
D9 - CSS - 選擇器們 - 偽元素(pseudo-elements)
系列文
GPT 救救我!菜雞小海獺的前端成長之旅30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言