CSS伪类怎么用？实用技巧全解析

li:nth-child(even) {
    background-color: #f0f0f0;
}

而伪元素 (Pseudo-elements) 呢，它更像是凭空“创造”了一个不存在于DOM结构中的虚拟元素，然后你可以给这个虚拟元素添加样式。最常见的比如 ::before 和 ::after，它们会在一个元素的内容之前或之后插入一块内容，这块内容本身在HTML里是没有对应的标签的。还有 ::first-letter、::first-line，它们分别选中一个元素的第一行或第一个字母，也是在DOM中没有独立标签的。伪元素通常用两个冒号 (::) 表示，虽然为了兼容老浏览器，单个冒号有时也能工作，但推荐使用双冒号来明确区分。

比如，你想在一个标题前加一个小图标，但不想在HTML里多写一个标签，就可以用::before：

h2::before {
    content: "✨ "; /* 插入一个星星表情 */
    margin-right: 5px;
}

你看，伪类是“选择”和“改变”现有元素的“状态”，而伪元素是“创造”并“样式化”一个“虚拟”的元素。这是它们最本质的区别。

CSS常用伪类有哪些，它们在实际项目中如何应用？

CSS伪类的种类繁多，但真正日常开发中高频使用的，其实也就那么几类。理解它们的应用场景，能极大提升你的开发效率和用户体验。

• 交互状态伪类 (:hover, :active, :focus, :visited)

  • :hover: 鼠标悬停在元素上时应用样式。这是最常用的了，比如按钮、链接、图片在鼠标移上去时改变背景色、文字颜色、显示阴影等，给用户提供视觉反馈。

    button:hover {
        background-color: #0056b3;
        transform: translateY(-2px); /* 轻微上浮 */
    }

  • :active: 元素被激活（比如鼠标按下未释放、键盘按下）时应用样式。常用于按钮、链接，模拟“按下”的视觉效果。

    a:active {
        color: #ff0000;
        transform: scale(0.98); /* 轻微缩小 */
    }

  • :focus: 表单元素（输入框、按钮）、链接等在获得焦点时应用样式。这对于键盘导航和可访问性至关重要，能明确告诉用户当前操作的元素是哪个。

    input:focus {
        border-color: #007bff;
        box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
        outline: none; /* 移除默认的蓝色轮廓 */
    }

  • :visited: 链接被用户访问过之后应用的样式。通常用于区分已读和未读链接，但出于隐私考虑，能修改的样式属性有限（比如只能改color）。

    a:visited {
        color: #663399; /* 访问过的链接显示紫色 */
    }

• 结构性伪类 (:first-child, :last-child, :nth-child(), :only-child, :root)

  • :first-child, :last-child: 分别选择父元素的第一个或最后一个子元素。常用于列表、表格，去除首尾元素的边框或添加特殊样式。

    ul li:first-child {
        font-weight: bold;
    }
    ul li:last-child {
        border-bottom: none;
    }

  • :nth-child(n): 选择父元素的第n个子元素。n可以是数字、关键字（even偶数，odd奇数）、或者表达式（如2n+1）。这是实现斑马纹表格、列表、网格布局中复杂选择的利器。

    tr:nth-child(odd) { /* 表格奇数行背景色 */
        background-color: #f9f9f9;
    }

  • :only-child: 选择父元素中唯一的子元素。当一个列表项是唯一的子元素时，可以给它一个特别的样式。

    div p:only-child {
        font-style: italic; /* 如果div只有一个p子元素，则p为斜体 */
    }

  • :root: 选择文档的根元素（即）。这在定义全局CSS变量时非常有用。

    :root {
        --primary-color: #007bff;
        --font-size-base: 16px;
    }
    body {
        color: var(--primary-color);
        font-size: var(--font-size-base);
    }

• 表单状态伪类 (:checked, :disabled, :enabled, :read-only, :placeholder-shown)

  • :checked: 适用于单选框 (radio) 和复选框 (checkbox)，当它们被选中时应用样式。

    input[type="checkbox"]:checked + label {
        font-weight: bold;
        color: #007bff;
    }

  • :disabled: 适用于被禁用的表单元素，如input, button, select, textarea。

    input:disabled {
        background-color: #e9ecef;
        cursor: not-allowed;
    }

  • :enabled: 适用于可用的表单元素。
  • :read-only: 适用于只读的表单元素。
  • :placeholder-shown: 当input或textarea的placeholder文本可见时应用样式。

• 否定伪类 (:not())

  • :not(selector): 匹配不符合selector条件的元素。这个伪类非常强大，可以帮助你排除特定元素，进行更精确的选择。

    li:not(:last-child) { /* 除了最后一个列表项，其他都加底边框 */
        border-bottom: 1px solid #eee;
    }

• 其他实用伪类 (:empty, :target)

  • :empty: 选择内容为空的元素。可以用来隐藏空的提示框，或者给空的容器一个特定的占位样式。

    div.alert:empty {
        display: none; /* 如果提示框内容为空，则隐藏 */
    }

  • :target: 当URL的哈希片段（#后面的部分）与元素的ID匹配时，该元素被选中。常用于高亮显示页面内部导航的目标区域。

    section:target {
        background-color: #fffacd;
        padding: 15px;
        border-left: 5px solid gold;
    }

这些伪类在实际项目中用起来，能让你的CSS代码更简洁，同时保持HTML结构的语义化和干净。

CSS伪类在响应式设计和可访问性中扮演什么角色？

别看伪类只是给元素加点样式，但在响应式设计和可访问性（Accessibility, A11y）这两大现代前端开发的基石中，它们的作用可一点不小，甚至可以说是不可或缺的。

在响应式设计中，伪类虽然不直接参与媒体查询（media query）来改变布局，但它们在不同屏幕尺寸下的用户体验和交互细节上，起到了微妙而关键的优化作用。

想象一下，在一个桌面端，我们可能习惯给按钮或导航链接加上精致的:hover效果，让用户知道鼠标指向了哪里。但到了移动端，触摸操作没有“悬停”这个概念，:hover效果自然就失效了。这时候，我们更需要关注:active伪类，它能确保用户在触摸并按住一个元素时，能得到即时的视觉反馈，比如按钮被“按下”的颜色变化或轻微缩放，这对于触摸界面的用户体验至关重要。

此外，一些基于:target伪类的交互，比如在桌面端用于高亮显示页面内导航到的章节，在移动端可能被巧妙地用于实现一个简单的“汉堡菜单”或抽屉式导航。点击导航图标（其href指向一个隐藏的导航菜单ID），菜单元素通过:target被显示出来。这是一种轻量级的响应式导航实现方式，避免了复杂的JavaScript。

/* 假设一个隐藏的导航菜单，ID为'main-nav' */
#main-nav {
    display: none;
    /* ...其他样式 */
}
/* 当URL哈希为#main-nav时显示 */
#main-nav:target {
    display: block;
    position: fixed; /* 或其他布局方式 */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.8);
    z-index: 1000;
}

通过媒体查询，我们可以在桌面端禁用这种:target导航，或者提供一个始终可见的导航栏。这种结合使用，让伪类在不同设备上发挥出不同的价值。

在可访问性方面，伪类的作用更是核心级别的。

最显著的就是 :focus 伪类。对于依赖键盘导航的用户（例如，视力障碍者、运动障碍者，或者只是习惯用键盘操作的用户），清晰的焦点指示是他们理解当前页面状态、知道哪个元素正在被操作的唯一途径。如果一个网站没有为:focus提供明确的视觉样式，那么键盘用户将寸步难行，这直接导致了糟糕的用户体验，甚至让网站无法使用。

/* 确保所有可聚焦元素都有明确的焦点样式 */
a:focus,
button:focus,
input:focus,
textarea:focus,
select:focus {
    outline: 3px solid #007bff; /* 明确的蓝色轮廓 */
    outline-offset: 2px; /* 轮廓与元素之间留一点间隙 */
}
/* 避免直接移除outline而没有替代方案 */
/* input:focus { outline: none; } 这种做法在可访问性上是灾难性的，除非有更好的视觉替代 */

此外，:disabled 伪类也直接影响可访问性。它不仅视觉上将禁用元素变灰，更重要的是，它向辅助技术（如屏幕阅读器）传达了该元素不可交互的信息。正确使用:disabled可以帮助屏幕阅读器用户理解哪些表单字段或按钮暂时不可用，从而避免不必要的尝试和困惑。

:checked 伪类对于自定义单选框和复选框的样式至关重要。虽然我们可以隐藏原生控件，但通过:checked来显示自定义的选中状态，确保了视觉上和语义上的同步，让用户和辅助技术都能清晰地知道某个选项是否被选中。

甚至像 :nth-child 这样的结构性伪类，在间接上也能提升可访问性。比如，当你在一个长列表中使用它来为奇偶行设置不同的背景色（斑马纹），虽然这主要是为了视觉美观和可读性，但对于有认知障碍的用户，这种视觉上的区分也能帮助他们更好地追踪行内容，减少阅读疲劳。

总而言之，伪类是CSS中一股不容小觑的力量。它们让我们的界面在视觉上更具吸引力，在交互上更流畅，更重要的是，它们为所有用户，包括那些有特殊需求的用户，构建了一个更易用、更包容的网络环境。忽视伪类在响应式和可访问性中的作用，无异于在现代Web开发中自断一臂。

今天关于《CSS伪类怎么用？实用技巧全解析》的内容就介绍到这里了，是不是学起来一目了然！想要了解更多关于响应式设计,伪元素,可访问性,CSS伪类,常用伪类的内容请关注golang学习网公众号！