CSS - Pseudo Classes

CSS僞類用於向某些選擇器添加特殊效果。使用這些效果不需要使用JavaScript或任何其他腳本。僞類的簡單語法如下所示−

selector:pseudo-class {property: value}

CSS classions can also be used with pseudo-classions&mins;

selector.class:pseudo-class {property: value}

最常用的僞類如下−

Sr.No.	Value & Description
1	：連結使用此類可向未訪問的連結添加特殊樣式。
2	：已訪問使用此類可向訪問的連結添加特殊樣式。
3	：懸停當您將滑鼠懸停在某個元素上時，使用此類可將特殊樣式添加到該元素。
4	：活動使用此類可向活動元素添加特殊樣式。
5	：聚焦使用此類可在元素具有焦點時向元素添加特殊樣式。
6	：第一個孩子使用此類可將特殊樣式添加到某個元素的第一個子元素中。
7	：lang 使用此類指定要在指定元素中使用的語言。

在<style>…<style>塊中定義僞類時，應注意以下幾點&負;

a：懸停必須在CSS定義中的a:link和a:visited之後才能生效。
a： active必須在CSS定義中的：hover之後才能生效。
僞類名不區分大小寫。
僞類不同於CSS類，但它們可以組合在一起。

The :link pseudo-class

下面的示例演示如何使用：link類設置連結顏色。可能的值可以是任何有效格式的任何顏色名稱。

Live Demo

<html>
   <head>
      <style type = "text/css">
         a:link {color:#000000}
      </style>
   </head>

   <body>
      <a href = "">Black Link</a>
   </body>
</html>

它將產生以下黑色連結&負;

The :visited pseudo-class

下面的示例演示如何使用：visited類設置已訪問連結的顏色。可能的值可以是任何有效格式的任何顏色名稱。

Live Demo

<html>
   <head>
      <style type = "text/css">
         a:visited {color: #006600}
      </style>
   </head>

   <body>
      <a href = "">Click this link</a>
   </body>
</html>

這將產生以下連結。一旦你點擊這個連結，它就會把顏色改成綠色。

The :hover pseudo-class

下面的示例演示如何使用：hover類在將滑鼠指針移到連結上時更改連結的顏色。可能的值可以是任何有效格式的任何顏色名稱。

Live Demo

<html>
   <head>
      <style type = "text/css">
         a:hover {color: #FFCC00}
      </style>
   </head>

   <body>
      <a href = "">Bring Mouse Here</a>
   </body>
</html>

它將生成以下連結。現在你把滑鼠移到這個連結上，你會看到它的顏色變爲黃色。

The :active pseudo-class

下面的示例演示如何使用：active類更改活動連結的顏色。可能的值可以是任何有效格式的任何顏色名稱。

Live Demo

<html>
   <head>
      <style type = "text/css">
         a:active {color: #FF00CC}
      </style>
   </head>

   <body>
      <a href = "">Click This Link</a>
   </body>
</html>

它將生成以下連結。當用戶單擊它時，顏色變爲粉紅色。

The :focus pseudo-class

下面的示例演示如何使用：focus類更改聚焦連結的顏色。可能的值可以是任何有效格式的任何顏色名稱。

Live Demo

<html>
   <head>
      <style type = "text/css">
         a:focus {color: #0000FF}
      </style>
   </head>

   <body>
      <a href = "">Click this Link</a>
   </body>
</html>

它將生成以下連結。當此連結聚焦時，其顏色將變爲橙色。當失去焦點時，顏色會變回原來的顏色。

The :first-child pseudo-class

：first child僞類匹配一個指定的元素，該元素是另一個元素的第一個子元素，並向該元素添加特殊樣式，該元素是另一個元素的第一個子元素。

使：第一個孩子在IE<工作;！DOCTYPE>必須在文檔頂部聲明。

例如，要縮進所有<div>元素的第一段，可以使用此定義&減號;

Live Demo

<html>
   <head>
      <style type = "text/css">
         div > p:first-child {
            text-indent: 25px;
         }
      </style>
   </head>

   <body>
   
      <div>
         <p>First paragraph in div. This paragraph will be indented</p>
         <p>Second paragraph in div. This paragraph will not be indented</p>
      </div>
      <p>But it will not match the paragraph in this HTML:</p>
      
      <div>
         <h3>Heading</h3>
         <p>The first paragraph inside the div. This paragraph will not be effected.</p>
      </div>
      
   </body>
</html>

它將產生以下結果&負;

The :lang pseudo-class

語言僞類：lang允許基於特定標記的語言設置構造選擇器。

這個類在文檔中非常有用，這些文檔必須適用於對某些語言構造具有不同約定的多種語言。例如，法語通常使用尖括號（<和>）進行引用，而英語則使用引號（'和'）。

在需要解決這個差異的文檔中，可以使用：lang僞類適當地更改引號。下面的代碼會根據所使用的語言更改<blockquote>標記;

Live Demo

<html>
   <head>
      <style type = "text/css">
         
         /* Two levels of quotes for two languages*/
         :lang(en) { quotes: '"' '"'  "'"  "'"; }
         :lang(fr) { quotes: "<<" ">>" "<" ">"; }
      </style>
   </head>
   
   <body>
      <p>...<q lang = "fr">A quote in a paragraph</q>...</p>
   </body>
</html>

：lang選擇器將應用於文檔中的所有元素。但是，並不是所有元素都使用quotes屬性，因此對大多數元素來說效果都是透明的。

它將產生以下結果&負;