CSS - 偽類

上一個
下一個

CSS 中的偽類用於根據元素的狀態或在文件樹中的位置選擇和設定元素的樣式，而無需新增額外的類或 JavaScript。

例如，偽類可用於在滑鼠懸停在元素上時更改其顏色，或單擊按鈕以更改顏色。

偽類屬性的示例 iframe - 技術教學
懸停我！

目錄


 

什麼是偽類？

  • 偽類通常與CSS 選擇器一起使用，在選擇器後插入一個冒號 (:)。例如 a : hover{}，此處選擇器 `a` 將選擇文件中的所有錨標記。
  • 函式式偽類包含一對括號來定義引數。例如：:lang(en)。
  • 附加偽類的元素稱為錨元素。例如：button:hover, a:focus, 等。此處 button 和 a 元素稱為錨元素。
  • 偽類根據文件樹的內容為元素應用樣式。
  • 偽類還會根據外部因素（例如元素導航的歷史記錄（:visited）、內容的狀態（:checked）或滑鼠的位置（:hover））為元素應用樣式。

語法

selector:pseudo-class {
   property: value;
}

偽類懸停

在 CSS 中，偽類 :hover 用於指定元素的滑鼠懸停狀態。這用於在使用者滑鼠穿過文件中的元素時設定元素的樣式。

語法

tag:hover {
   property: value;
}

示例

以下示例顯示瞭如何應用它。

<!DOCTYPE html>
<html lang="en">
<head>
   <style>
      a{
         background-color: lightgrey;
         padding: 10px;
      }
      a:hover {
         color: red;
      }
      
      div{
         padding: 10px;
         border: solid 3px;
         background-color: aqua;
      }
      div:hover{
         background-color: lightgreen;
      }
   </style>
</head>

<body>
   <h3>Anchor Tag Hovering</h3>
   <a href="#">Hover over me!</a>
   
   <h3>Div Hovering</h3>
   <div>Hover me</div>
</body>
</html>

偽類活動

偽類 :active 將在使用者透過單擊或點選啟用元素時為其應用樣式。這最常用於互動式元素（如按鈕和錨標記），但所有 HTML 元素都可以使用此偽類。

語法

tag:active {
   property: value;
}

示例

這是一個顯示偽類活動的不同用法的示例。

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
      a, p, li {
         color: black;
         background-color: lightgrey;
         padding: 7px;
         border: 3px solid;      
      }

      a:active {
         color: red;
      }
   
      p:active {
         background-color: gold;
      }
      
      li:active {
         background-color: darkred;
      }
    </style>
</head>

<body>
    <h2>Active Pseudo-Class Example</h2>
    <h3>For Button:</h3>
    <a href="#">Click Me</a>
    
    <h3>For paragraph:</h3>
    <p>Click me to see the effect.</p>
    
    <h3>For list:</h3>
        <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
    </ul>
</body>
</html>

偽類焦點

偽類 :focus 將在使用者透過單擊聚焦元素（如輸入標記）時為其應用樣式。在輸入元素中鍵入文字之前，使用者必須單擊輸入區域以啟用游標，這稱為聚焦。

語法

tag:focus {
   property: value;
}

示例

此示例將顯示如何在 HTML 中使用偽類焦點。

<!DOCTYPE html>
<html lang="en">
<head>
   <style>
      input{
         padding:3px;
      }
      input:focus {
         border-color: green;
         background-color: lightgrey;
      }
   </style>
</head>

<body>
    <h2>Pseudo-Class focus Example</h2>
    <h3>Focus on input text</h3>
    <input type="text" 
           placeholder="Type Something!">

</body>
</html>

偽類第 n 個子元素

偽類 :nth-child(n) 將為元素的任何指定的直接子元素應用樣式。

語法

tag:nth-child(number/ expression / odd / even) {
   property: value;
}

偽類 nth-child 可以將數字、數學表示式或奇數、偶數等值作為引數。要了解與第 n 個子元素關聯的值，請訪問我們關於偽類 nth-child()。的教程。

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
      div{
         border: 2px solid;
         margin: 7px;
         padding: 2px;
      }
      /* Apply Style to 2nd child of div */
      div:nth-child(2){
         background-color:red;
      }
      
      /* Apply Style to all odd children of li */
      li:nth-child(odd) {
         background-color: lightgray;
      }
      
      /* Apply Style to all even children of li */
      li:nth-child(even) {
         background-color: lightblue;
      }
    </style>
</head>

<body>
    <h2>Pseudo-Class nth-child</h2>
    <h3>2nd child of Div</h3>
    <div>
        <div>1st div</div>
        <div>2nd div</div>
        <div>3rd div</div>
        <div>4th div</div>
    </div>
    
    <h3>Selecting odd and even children</h3>
    <ul>
        <li>First item</li>
        <li>Second item</li>
        <li>Third item</li>
        <li>forth item</li>
        <li>Third item</li>
        <li>fifth item</li>
    </ul>
</body>
</html>

偽類第一個子元素

偽類 first-child 用於選擇第一個直接子元素。

語法

tag:first-child {
   property: value;
}

示例

以下示例顯示瞭如何在 HTML 中使用 first-child 偽類。

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
      div{
         border: solid;
      }
      /* Selects all first child paragraphs */
      p:first-child {
         color: blue;
      }
    </style>
</head>
<body>   
   <p>
      This paragraph is first child of body 
      element, will be blue.
   </p>
   <p>This paragraph will not be affected.</p>
   <p>Another paragraph that won't be affected.</p>

   <div>
      <p>
         This paragraph is first child of div 
         element will be blue.
      </p>
      <p>This paragraph will not be affected.</p>
      <p>Another paragraph that won't be affected.</p>
   </div>
</body>
</html>

偽類最後一個子元素

偽類 last-child 用於選擇最後一個直接子元素。

語法

tag:last-child {
   property: value;
}

示例

以下示例顯示瞭如何在 HTML 中使用 last-child 偽類。

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
      div{
         border: solid;
      }
      /* Selects all last child paragraphs */
      p:last-child {
         color: blue;
      }
    </style>
</head>
<body>
   <p>This paragraph will not be affected.</p>
   <p>Another paragraph that won't be affected.</p>

   <div>
      <p>This paragraph will not be affected.</p>
      <p>Another paragraph that won't be affected.</p>
      <p>
         This paragraph is last child of div 
         element will be blue.
      </p>
   </div>

   <p>
      This paragraph is last child of body 
      element, will be blue.
   </p>
</body>
</html>

偽類語言

偽類 :lang() 將根據設定為元素或其父元素的 lang 屬性的值為元素應用樣式。

這是一個:lang()偽類的示例。

<html>
<head>
<style>
   /* Selects all the tags that set english as language */
   :lang(en) {
      quotes: '""';
   }
   /* Selects all the tags that set french as language */
   :lang(fr) {
      quotes: '« ' ' »';
   }
</style>
</head>
<body>
   <h2>:lang() selector example</h2>
   <q lang="en">
      This language is set as english, Here 
      css use double(" ") quotes
   </q>

   <br>

   <q lang="fr">
      This language is set as French, Here 
      css use guillemet(« ») quotes
   </q>

</body>
</html>

偽類非

偽類 :not(selector) 用於為除提到的選擇器中包含的元素之外的所有元素應用樣式。要了解 CSS 中的選擇器是什麼，請檢視我們關於CSS 選擇器。的教程。

語法

tag:not(selector){
   property: value;
}

選擇器可以是 HTML 中的類、ID 或標籤。

示例

以下示例顯示瞭如何在 CSS 中使用 not 偽類。

<!DOCTYPE html>
<html lang="en">
<head>
    <title>CSS :not() Example</title>
    <style>
      /*Style all paragraph except class special*/
      p:not(.special) {
         color: red;
      }
      
      /*Style all special paragraph except id superSpecial*/
      .special:not(#superSpecial){
         background-color: lightgrey;
      }
    </style>
</head>

<body>
    <p>This is a normal paragraph.</p>
    <p class="special" id="superSpecial">
      This is a super special paragraph.
   </p>
    <p>This is another normal paragraph.</p>
    <p class="special">
      This is special paragraph.
   </p>
</body>
</html>

CSS 偽類列表

下表列出了所有 CSS 偽類。

偽類 描述 示例
:active 表示使用者已啟用的元素。
:any-link 表示充當超連結源錨點的元素，無論它是否已被訪問。
:autofill 匹配瀏覽器自動填充其值的元素。
:checked 匹配任何已選中或切換的單選按鈕、複選框或選項元素。
:default 選擇在一組相關元素中為預設值的表單元素。
:defined 表示任何已定義的自定義元素。
:disabled 表示停用的元素。
:empty 匹配沒有子元素的元素。
:enabled 表示已啟用的元素，在啟用後。
:first 表示列印文件的第一頁，使用 @page at-rule。
:first-child 表示一組同級元素中的第一個元素。
:first-of-type 表示一組同級元素中其型別中的第一個元素。
:fullscreen 匹配當前以全屏模式顯示的元素。
:focus 表示已獲得焦點的元素。
:focus-visible 在元素匹配 :focus 偽類或獲得焦點時應用。
:focus-within 如果元素或其任何後代獲得焦點，則匹配該元素。
:has() 如果任何相關的選擇器，則表示此元素。
:host 這將選擇包含其內部使用的 CSS 的 Shadow DOM 的 Shadow Host。
:host() 此函式選擇包含其內部使用的 CSS 的 Shadow DOM 的 Shadow Host。
:host-context() 此函式允許您根據其祖先元素的類或屬性來設定自定義元素的樣式。
:hover 當用戶使用指向裝置（如滑鼠）與元素互動時匹配，但不一定啟用它。
:indeterminate 表示任何狀態不確定或未知的表單元素。
:in-range 表示其當前值在範圍限制內的元素。
:invalid 表示任何內容無法驗證的元素。
:is() 以選擇器列表作為其引數，並選擇任何可以被該列表中的選擇器之一選擇的元素。
:lang() 根據元素定義所在的語言匹配元素。
:last-child 表示一組同級元素中的最後一個元素。
:last-of-type 表示一組同級元素中其型別中的最後一個元素。
:left 表示列印文件的所有左側頁面，與 @page at-rule 一起使用。
:link 表示尚未訪問的元素。
:modal 匹配處於排除與外部元素的所有互動狀態的元素，直到互動被駁回。
:not() 表示不匹配選擇器列表的元素。
:nth-child() 根據子元素在父元素內所有同級元素中的位置選擇子元素。
:nth-last-child() 根據元素在同級元素中的位置匹配元素，從最後一個（末尾）開始計數
:nth-last-of-type() 根據元素在同類型兄弟元素中的位置匹配元素，從最後一個（結尾）開始計數。
:nth-of-type() 根據元素在同類型兄弟元素中的位置匹配元素。
:only-child 表示沒有兄弟元素的元素。
:only-of-type 表示沒有同類型兄弟元素的元素。
:optional 表示沒有設定 required 屬性的元素。
:out-of-range 表示當前值超出範圍限制的元素。
:picture-in-picture 匹配當前處於畫中畫模式的元素。
:placeholder-shown 表示當前顯示佔位符文字的任何元素。
:read-only 表示使用者無法編輯的元素。
:read-write 表示使用者可以編輯的元素。
:required 表示已設定 required 屬性的元素。
:right 表示列印文件的所有右側頁面，與 @page at-rule 一起使用。
:root 匹配文件樹的根元素。
:scope 表示作為選擇器匹配參考點或範圍的元素。
:target 表示其 id 與 URL 片段匹配的目標元素。
:valid 表示內容驗證成功的任何元素。
:visited 連結被訪問後應用。
:where() 以選擇器列表作為引數，並選擇匹配的任何元素。
列印頁面
上一頁
下一頁
廣告