CSS語法 - 偽class

偽class是用來執行在特定動作時改變文字樣式。

用來設定連結的樣式

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

對於使用者的操作做出樣式改變。

• :hover 當鼠標滑入。
• :active 使用滑鼠點擊。
• :focus 當元素有焦點。

:target

使用於連結與連結的錨點相符的 id 其目標元素。
例如：點擊 Open example 顯示 id=”example” 的元素，點擊 Close 則將其隱藏。

範例 : :target

<div>
  <a href="#example">Open example</a>
</div>
<div id="example" class="box">
  <div>
    123456789
  </div>
  <a href="#">Close</a>
</div>

<style>
  .box {
    display: none;
  }

  .box:target {
    display: block;
  }
</style>

套用在 input 上使用

• :checked 選取時( radio、checkbox 使用 )。
  例如：切換顯示與否。

範例 : :checked

<div>
  <input type="checkbox" name="my-box" id="op">
  <p>123</p>
  <p class="text">456</p>
  <p class="text">789</p>
  <label for="op" id="btn">點點我!</label>
</div>

<style>
  #op {
    display: none;
  }

  .text {
    display: none;
  }

  #btn {
    display: inline-block;
    background-color: #ff7;
    border: 1px solid;
  }

  #op:checked~ .text {
    display: block;
  }

  #op:checked~ #btn{
    background-color: #ccc;
  }
</style>

• :disabled 禁用狀態。
• :enabled 啟用狀態。
• :placeholder 提示字樣式。
  :placeholder

  <input type="text" placeholder="輸入">
  
  <style>
    input::placeholder {
      color: rgb(96, 123, 244);
    }
  
    input:focus {
      background-color: lightblue;
    }
  
    input:focus::placeholder {
      color: orange;
    }
  </style>

排除選擇相符的元素

• :not(選擇器參數) 排除選擇相符的元素。
  例如：選取 input 中所有不是 type=”checkbox” 的元素。

  input:not[type="checkbox"]

參考資料 :
MDN
重新認識 CSS - Pseudo-class (偽類) (1)