Pseudo-classes 偽類別選擇器

語法：

selector:pseudo-class {
  property: value;
}

• 連結偽類

  :link-未訪問過的連結。
  :visited-已訪問過的連結。

  舉例：
  HTML

  <a href="https://www.w3school.com.cn/css/css_colors.asp">CSS-顏色</a>
  <br>
  <a href="https://www.google.com.tw/?hl=zh_TW">Google</a>
  

  CSS

  a:link {
      color: darkolivegreen;
  }
  
  a:visited {
      color: brown;
  }
  

  顯示：
  

• 使用者操作偽類

  :active-滑鼠點擊的樣式。
  :hover-滑鼠游標懸停的樣式。
  :focus-目標為焦點的樣式。(只作用在表單輸入元素)

  舉例:
  HTML

  <input type="text">
  

  CSS

  input:focus {
      color: coral;
  }
  

  顯示：
  

• 目標偽類

  :target-設定錨點的樣式。

  舉例：
  HTML

  <a href="#sleep">哪些是重要的事?</a>
  <p id="sleep">睡覺、吃飯</p>
  

  CSS

  #sleep:target {
      background-color: bisque;
  }
  

  顯示：

  • 點擊錨點前：
    
  • 點擊錨點後：
    

參考資料：https://www.footmark.com.tw/news/web-design/css/css-pseudo-class-selectors/#fm-chapter-3-4
https://developer.mozilla.org/zh-TW/docs/Web/CSS/Pseudo-classes