Css 简明教程

CSS - Pseudo Classes

CSS 中的伪类用于根据元素在文档树中的状态或位置选择和设置元素样式，而不需要添加额外的类或 JavaScript。

例如，可以将伪类用于在悬停鼠标指针时更改元素颜色，也可以单击按钮以更改颜色。

What is Pseudo-class?

伪类经常与 * CSS Selectors* 结合使用，方法是在选择器后插入冒号(:)。例如 * a : hover{}*，此处的选择器 a 将选择文档中的所有锚点标记。
功能性伪类包含一对括号来定义参数。例如： :lang(en) 。
附加伪类的元素被称为锚元素。例如： button:hover, a:focus, 等。此处“button”和“a”元素被称为锚元素。
伪类根据文档树的内容将样式应用于某个元素。
伪类还将样式应用于某元素，以与其外部因素相关联，诸如元素导航历史记录 ( :visited )、内容状态 ( :checked ) 或鼠标位置 ( :hover )。

Syntax

selector:pseudo-class {
   property: value;
}

Pseudo-Class Hover

在 CSS 中，伪类 * :hover* 用于指定某个元素的鼠标悬停状态。这用于在用户将鼠标悬停在文档中的某个元素上时对该元素进行设置样式。

Syntax

tag:hover {
   property: value;
}

Example

以下示例展示了如何应用此操作。

<!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>

Pseudo-Class Active

当用户通过单击或点击激活某个元素时，伪类 * :active * 将向该元素应用样式。此操作最常用于按钮和锚定标记等交互式元素，但所有 HTML 元素都可以使用此伪类。

Syntax

tag:active {
   property: value;
}

Example

以下是一个显示伪类 active 不同用法的示例。

<!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>

Pseudo-Class Focus

当用户像单击一样聚焦某个元素（例如输入标记）时，伪类 * :focus* 将向该元素应用样式。在输入元素中输入文本之前，用户必须单击输入区域以启用光标，这称为聚焦。

Syntax

tag:focus {
   property: value;
}

Example

此示例将展示如何在 HTML 中使用伪类 focus。

<!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>

Pseudo-Class nth Child

伪类 :nth-child(n) 将向某个元素的任何指定直接子元素应用样式。

Syntax

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

伪类 nth-child 可以以数字、数学表达式或奇数、偶数等值作为参数。要了解与 nth-child 关联的值，请访问我们在 * Pseudo Class 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>

Pseudo-Class First-Child

伪类 first-child 用于选择第一个直接子元素。

Syntax

tag:first-child {
   property: value;
}

Example

以下示例展示如何在 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>

Pseudo-Class Last-Child

伪类 last-child 用于选择最后一个直接子元素。

Syntax

tag:last-child {
   property: value;
}

Example

以下示例展示如何在 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>

Pseudo-Class Lang

伪类 :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>

Pseudo-Class Not

伪类 :not(selector) 用于对除包含在上述选择器中的元素之外的所有元素应用样式。要了解 CSS 中的选择器是什么，请查看我们在 * CSS Selectors.* 中提供的教程。

Syntax

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

选择器可以在 HTML 中是一个类、ID 或标记。

Example

以下示例展示如何在 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>

List of CSS Pseudo Classes

下表列出了所有 CSS 伪类：

Pseudo-class

Description

Example

:active

表示已由用户激活的元素。

Css 简明教程

CSS - Pseudo Classes

Table of Contents

What is Pseudo-class?

Syntax

Pseudo-Class Hover

Syntax

Example

Pseudo-Class Active

Syntax

Example

Pseudo-Class Focus

Syntax

Example

Pseudo-Class nth Child

Syntax

Pseudo-Class First-Child

Syntax

Example

Pseudo-Class Last-Child

Syntax

Example

Pseudo-Class Lang

Pseudo-Class Not

Syntax

Example

List of CSS Pseudo Classes