Css 简明教程

CSS - Pseudo Classes

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

Pseudo-classes in CSS are used to select and style elements based on their state or position within the document tree, without the need for adding extra classes or JavaScript.

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

For Example, pseudo-class can be used to change color of element when mouse is hovered over it or Click a button to change color.

What is Pseudo-class?

Pseudo-classes often used along with CSS Selectors by inserting a colon (:) after selector. For example * a : hover{}*, Here selector a will selects all the anchor tags in document.
A functional pseudo-class contains a pair of parentheses to define the arguments. For example: :lang(en).
The element to which a pseudo-class is attached, is termed as an anchor element. For example: button:hover, a:focus, etc. Here button and a elements are called the anchor elements.
Pseudo-classes apply style to an element as per the content of the document tree.
Pseudo-classes also apply a style to an element in relation to the external factors, such as history of the navigation of the element (:visited), status of the content (:checked), or position of mouse (:hover)

Syntax

selector:pseudo-class {
   property: value;
}

Pseudo-Class Hover

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

In CSS, pseudo-class :hover is used to specify mouse hovering state of an element. This used to style element while users mouse passes through an element in document.

Syntax

tag:hover {
   property: value;
}

Example

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

Following example shows how this can be applied.

<!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 元素都可以使用此伪类。

The pseudo-class :active will apply style to an element when user activates the element by clicking or tapping on it. This is most commonly used with interactive elements like button and anchor tag, but all the HTML elements can use this pseudo-class.

Syntax

tag:active {
   property: value;
}

Example

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

Here is an example that shows different usage of pseudo-class 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* 将向该元素应用样式。在输入元素中输入文本之前，用户必须单击输入区域以启用光标，这称为聚焦。

The pseudo-class :focus will apply style to an element when user focused an element like input tag by clicking on it. Before typing text in input element users has to click in input area to enable cursor, this is called focusing.

Syntax

tag:focus {
   property: value;
}

Example

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

This example will show how to use pseudo-class focus in 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>

Pseudo-Class nth Child

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

The pseudo-class :nth-child(n) will apply style to any specified direct child of an element.

Syntax

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

伪类 nth-child 可以以数字、数学表达式或奇数、偶数等值作为参数。要了解与 nth-child 关联的值，请访问我们在 * Pseudo Class nth-child().* 中提供的教程。

The pseudo-class nth-child can take number, mathematical expression or values like odd, even as parameter. To know about values associated with nth child visit our tutorial on 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 用于选择第一个直接子元素。

The pseudo-class first-child used to select first direct child element.

Syntax

tag:first-child {
   property: value;
}

Example

以下示例展示如何在 HTML 中使用 first-child 伪类。

Following example show how to use first-child pseudo-class in HTML.

<!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 用于选择最后一个直接子元素。

The pseudo-class last-child used to select last direct child element.

Syntax

tag:last-child {
   property: value;
}

Example

以下示例展示如何在 HTML 中使用 last-child 伪类。

Following example show how to use last-child pseudo-class in HTML.

<!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 属性（设置为元素或其父元素）的值对某个元素应用样式。

The pseudo-class :lang() will apply style to an element based on value of lang attribute set to the element or it’s parent.

以下是 * :lang()* 伪类的示例：

Here is an example of :lang() pseudo-class:

<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.* 中提供的教程。

The pseudo-class :not(selector) is used to apply style on all the elements expect elements that included in mentioned selectors. To know what is a selector in CSS check out our tutorial on CSS Selectors.

Syntax

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

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

The selector can be a class, id, or tag in html.

Example

以下示例展示如何在 CSS 中使用 not 伪类

Following example shows how to use not pseudo-class in CSS

<!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 伪类：

The table given below lists all the CSS pseudo-classes:

Pseudo-class

Description

Example

:active

Represents an element that has been activated by the user.

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