css伪类是选择器的补充，通过冒号表示，用于根据元素状态或位置应用样式。常见类型包括状态伪类（如:hover、:active）、结构伪类（如:first-child、:nth-child(n)）、ui状态伪类（如:enabled、:checked）和目标伪类（如:target）。使用时需注意选择器优先级、顺序、html结构及浏览器兼容性。此外，伪类可结合动画实现高级交互效果，并可通过:focus-within、:empty等实现表单提示、空元素提示等。伪类与伪元素不同，后者以双冒号表示，能创建新元素并添加样式。
CSS 伪类本质上是选择器的一种补充，让你可以在没有 JavaScript 的情况下，根据元素的状态或在文档树中的位置来应用样式。它们就像是 CSS 赋予你的“特异功能”，能让你在不修改 HTML 结构的前提下，实现更丰富的交互效果。
解决方案
CSS 伪类通过冒号 : 来表示，紧跟在选择器后面。例如，a:hover 就是一个经典的伪类应用，它表示当鼠标悬停在链接 <a> 元素上时，应用特定的样式。
常用的伪类可以分为几大类：
立即学习“前端免费学习笔记（深入）”；
-
状态伪类： 这类伪类根据元素的状态改变样式，比如
:hover（鼠标悬停）、:active（元素被激活，通常是点击时）、:focus（元素获得焦点）、:visited（链接已被访问过）等。 -
结构伪类： 这类伪类根据元素在文档树中的位置改变样式，比如
:first-child（第一个子元素）、:last-child（最后一个子元素）、:nth-child(n)（第 n 个子元素）、:nth-of-type(n)（第 n 个特定类型的子元素）等。 -
UI 元素状态伪类： 这类伪类与表单元素的状态有关，比如
:enabled（元素可用）、:disabled（元素禁用）、:checked（单选框或复选框被选中）等。 -
目标伪类：
:target伪类用于选取当前活动的锚点目标元素。
应用伪类非常简单，只需要在 CSS 规则中选择器后面加上伪类即可。例如：
a:hover {
color: red;
text-decoration: none;
}
li:nth-child(odd) {
background-color: #f2f2f2;
}
input:disabled {
opacity: 0.5;
cursor: not-allowed;
}为什么我的 CSS 伪类不起作用？常见原因排查
伪类不起作用的情况，我遇到过几次，总结下来大概有以下几个常见原因：
-
选择器优先级问题： CSS 规则是有优先级的，如果你的伪类样式被其他优先级更高的规则覆盖了，它就不会生效。你需要检查你的 CSS 规则，看看是否有更具体的选择器或者使用了
!important覆盖了你的伪类样式。 -
伪类顺序错误： 有些伪类有特定的顺序要求，比如
:link,:visited,:hover,:active(简记为 LVHA) 这个顺序是固定的，如果顺序颠倒，可能会导致某些伪类失效。 -
HTML 结构问题： 某些结构伪类依赖于特定的 HTML 结构，如果你的 HTML 结构不符合要求，伪类可能不会生效。例如，
:first-child只有当元素是其父元素的第一个子元素时才会生效。 - 浏览器兼容性问题： 虽然大多数伪类都得到了广泛的支持，但仍然有一些伪类在某些旧版本的浏览器中可能无法正常工作。你可以查阅 MDN 文档或者 Can I Use 网站来了解特定伪类的浏览器兼容性。
- JavaScript 干扰： 如果你的页面使用了 JavaScript，并且 JavaScript 代码修改了元素的 class 或者 style，可能会影响伪类的效果。
如何使用 CSS 伪类实现更高级的交互效果？
伪类不仅仅可以用来改变简单的样式，还可以实现一些更高级的交互效果。
-
使用
:focus-within实现表单验证提示：:focus-within伪类可以选取到自身或者其子元素获得焦点的元素。你可以利用这个特性，在表单获得焦点时显示验证提示信息。<form> <label for="username">Username:</label> <input type="text" id="username"> <span class="error-message">Username is required</span> </form> <style> .error-message { display: none; } form:focus-within .error-message { display: block; } </style> -
使用
:empty实现空元素提示：:empty伪类可以选取到没有子元素的元素。你可以利用这个特性，在空元素中显示一些提示信息。<div class="placeholder"></div> <style> .placeholder:empty::before { content: "No content yet."; color: gray; } </style> -
结合 CSS 动画和过渡，实现更平滑的交互效果： 你可以将伪类和 CSS 动画、过渡结合起来，实现更平滑的交互效果。例如，当鼠标悬停在按钮上时，按钮的颜色平滑过渡到另一种颜色。
button { background-color: blue; color: white; transition: background-color 0.3s ease; } button:hover { background-color: darkblue; }
CSS 伪元素与伪类的区别是什么？
很多人容易混淆 CSS 伪元素和伪类，它们虽然都以冒号开头，但本质上是不同的。
- 伪类： 表示元素的一种状态或条件，它并不创建新的元素。
-
伪元素： 创建新的元素，并允许你为这些元素添加样式。常见的伪元素包括
::before和::after，它们可以在元素的内容之前或之后插入内容。
举个例子，a:hover 是一个伪类，它表示当鼠标悬停在链接上时的状态。而 p::first-line 是一个伪元素，它表示段落的第一行。
伪元素使用双冒号 ::，而伪类使用单冒号 :。虽然现在浏览器对单冒号的伪元素也支持，但为了区分两者，建议始终使用双冒号表示伪元素。
