一 伪类（Pseudo-classes）

1 定义

伪类是用于选择处于特定状态或条件下的 HTML 元素。它们通常以单冒号 (😃 开头，后面跟着伪类名称。这些状态可能与用户的交互、元素在文档中的结构位置等相关。

2 常见伪类

1. :hover

当鼠标悬停在元素上时应用的样式。

javascript">a:hover {color: red;
}

2. :active

当元素被点击时应用的样式。

javascript">button:active {background-color: green;
}

3. :focus

当元素获得焦点时应用的样式（例如，输入框）。

javascript">input:focus {border: 2px solid blue;
}

4. :nth-child(n)

选择父元素中第 n 个子元素，可以使用公式（如 2n 表示偶数，2n+1 表示奇数）。

javascript">li:nth-child(2n) {background-color: lightgray;
}

5. :first-child

选择父元素的第一个子元素。

javascript">p:first-child {font-weight: bold;
}

6. :last-child

选择父元素的最后一个子元素。

javascript">p:last-child {color: blue;
}

7. :not(selector)

选择不匹配给定选择器的元素。

javascript">div:not(.special) {background-color: yellow;
}

用法示例

javascript">html<ul><li>Item 1</li><li class="special">Item 2</li><li>Item 3</li>
</ul><style>
li:hover {background-color: lightblue; /* 鼠标悬停时改变背景 */
}
li.special {font-weight: bold; /* 特殊项加粗 */
}
li:nth-child(2) {text-decoration: underline; /* 第二项下划线 */
}
</style>

二 伪元素（Pseudo-elements）

1 定义

伪元素用于选择元素的特定部分或创建虚拟元素。它们通常以双冒号 (:😃 开头，后面跟着伪元素名称。伪元素可以用来插入内容、样式化特定部分等。

2 常见伪元素

1. ::before

在元素内容之前插入内容。

javascript">p::before {content: "Notice: ";font-weight: bold;
}

2. ::after

在元素内容之后插入内容。

javascript">p::after {content: " Thank you!";
}

3. ::first-line

选择块级元素的第一行文本，并可以为其应用样式。

javascript">p::first-line {font-weight: bold;
}

4. ::first-letter

选择块级元素的第一个字母，并可以为其应用样式。

javascript">p::first-letter {font-size: 2em;color: red;
}

用法示例

javascript"><p>This is a sample paragraph.</p><style>
p::before {content: "Note: "; /* 在段落前添加内容 */font-weight: bold;
}p::after {content: " [End of paragraph]"; /* 在段落后添加内容 */
}p::first-line {color: blue; /* 第一行文字变为蓝色 */
}p::first-letter {font-size: 2em; /* 第一个字母变大 */color: orange; /* 第一个字母变为橙色 */
}
</style>

三 伪类与伪元素的区别

特性	伪类	伪元素
定义	用于选择特定状态的元素	用于选择元素的特定部分或插入内容
语法	使用单冒号 (:)	使用双冒号 (::)
示例	:hover, :focus, :nth-child(n)	::before, ::after, ::first-line, ::first-letter
应用场景	根据用户交互或元素的结构状态改变样式	对元素的特定部分进行样式设置或插入内容

• 伪类帮助我们根据元素的状态（如悬停、获得焦点等）来应用样式。
• 伪元素则允许我们对元素的特定部分进行样式处理，或者在内容前后添加额外的内容。