伪元素与伪类

伪类 (Pseudo-class)

伪类用于选择处于特定状态或具有特定属性的元素。这些状态可能是动态的（例如鼠标悬停），也可能是基于文档结构（例如第一个子元素）。

语法

伪类使用单个冒号 : 表示。

常见伪类

用户交互相关

:hover：鼠标悬停时。
:focus：元素获取焦点时。
:active：元素被点击时。

结构相关

:first-child：选择元素的第一个子元素。
:last-child：选择元素的最后一个子元素。
:nth-child(n)：选择元素的第 n 个子元素。
:nth-last-child(n)：选择元素的倒数第 n 个子元素。
:first-of-type：选择元素的第一个相同类型的子元素。
:last-of-type：选择元素的最后一个相同类型的子元素。
:nth-of-type(n)：选择元素的第 n 个相同类型的子元素。
:nth-last-of-type(n)：选择元素的倒数第 n 个相同类型的子元素。

其他

:empty：选择没有子元素的元素。
:target：选择当前活动的锚点元素。
:disabled: 选择禁用的元素。
:enabled: 选择启用的元素。
:checked: 选择选中的 checkbox 或 radio 元素。
:not(selector)：选择不匹配指定选择器的元素。

伪元素 (Pseudo-element)

定义

伪元素用于选择文档中的某些部分，这些部分通常不在 DOM 中明确表示，例如文本的第一行或首字母。

语法

伪元素使用双冒号 :: 表示（早期标准中也允许使用单冒号）。

常见伪元素

::before: 在元素内容前插入内容。
::after: 在元素内容后插入内容。
::first-line: 选择元素的第一行。
::first-letter: 选择元素的首字母。
::selection: 选择用户选取的文本。
::backdrop: 选择背景。

伪类与伪元素的区别

特性	伪类	伪元素
作用对象	整个元素	元素特定部分
语法	单冒号 :	双冒号 ::
例子	`:hover,`:not-child(n)`	`::before`,`::first-line`

示例代码

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>伪类与伪元素示例</title>
    <style>
        /* 伪类 */
        a:hover {
            color: red;
        }

        li:nth-child(2) {
            background-color: lightblue;
        }

        /* 伪元素 */
        p::before {
            content: "提示: ";
            color: gray;
        }

        p::first-line {
            font-weight: bold;
        }
    </style>
</head>
<body>
<a href="#">这是一个链接</a>
<ul>
    <li>第一项</li>
    <li>第二项</li>
    <li>第三项</li>
</ul>
<p>这是一个段落，用于展示伪类和伪元素的效果。</p>
</body>
</html>

伪元素与伪类 ​

伪类 (Pseudo-class) ​

语法 ​

常见伪类 ​

伪元素 (Pseudo-element) ​

定义 ​

语法 ​

常见伪元素 ​

伪类与伪元素的区别 ​

示例代码 ​

伪元素与伪类

伪类 (Pseudo-class)

语法

常见伪类

伪元素 (Pseudo-element)

定义

语法

常见伪元素

伪类与伪元素的区别

示例代码