MK
摩柯社区 - 一个极简的技术知识社区
AI 面试

CSS伪类选择器：:hover、:focus和:nth-child的实战技巧

2021-10-076.2k 阅读

CSS 伪类选择器：:hover、:focus 和 :nth - child 的实战技巧

:hover 伪类选择器

:hover 伪类选择器在网页设计中是一个非常常用的工具，它允许我们在用户将鼠标悬停在某个元素上时应用特定的样式。这种交互效果能够为用户提供即时反馈，增强用户体验。

:hover 的基本语法

:hover 伪类通常与其他选择器一起使用，语法格式为 选择器:hover {样式规则}。例如，我们想在鼠标悬停在链接上时改变链接的颜色，可以这样写：

a:hover {
    color: red;
}

在这个例子中，a 是 HTML 中的链接标签，当鼠标悬停在 a 标签所表示的链接上时，链接的文本颜色会变成红色。

:hover 在按钮设计中的应用

按钮是网页交互中常见的元素，利用 :hover 可以为按钮添加动态效果，使其更加吸引用户。

假设我们有一个简单的按钮，HTML 代码如下：

<button class="my - button">点击我</button>

CSS 样式：

.my - button {
    background - color: #007BFF;
    color: white;
    padding: 10px 20px;
    border: none;
    border - radius: 5px;
    cursor: pointer;
}

.my - button:hover {
    background - color: #0056b3;
}

在上述代码中，按钮初始背景颜色为蓝色（#007BFF），当鼠标悬停时，背景颜色变为更深的蓝色（#0056b3）。这种颜色变化给用户一种按钮可点击且在交互中的反馈，提升了按钮的可用性和吸引力。

:hover 在导航栏中的应用

导航栏是网站结构的重要组成部分，使用 :hover 可以为导航栏添加一些动态效果，方便用户浏览。

HTML 导航栏代码示例：

<ul class="nav - bar">
    <li><a href="#">首页</a></li>
    <li><a href="#">产品</a></li>
    <li><a href="#">关于我们</a></li>
    <li><a href="#">联系我们</a></li>
</ul>

CSS 样式：

.nav - bar {
    list - style - type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background - color: #333;
}

.nav - bar li {
    float: left;
}

.nav - bar li a {
    display: block;
    color: white;
    text - align: center;
    padding: 14px 16px;
    text - decoration: none;
}

.nav - bar li a:hover {
    background - color: #111;
}

这里，导航栏初始背景为深灰色（#333），当鼠标悬停在导航项链接上时，背景颜色变为更深的黑色（#111），同时文本颜色保持白色不变，让用户清晰地知道当前悬停的导航项，提高导航的易用性。

:hover 结合子元素选择器的应用

我们还可以结合子元素选择器使用 :hover，以实现更复杂的效果。例如，当鼠标悬停在一个父元素上时，改变其子元素的样式。

HTML 代码：

<div class="parent - div">
    <p>这是父元素中的子段落</p>
</div>

CSS 样式：

.parent - div {
    border: 1px solid gray;
    padding: 10px;
}

.parent - div:hover p {
    color: green;
}

在这个例子中，当鼠标悬停在 parent - div 这个父元素上时，其内部的 p 段落元素的文本颜色会变为绿色。这种技巧在设计包含多个元素的组件时非常有用，比如卡片组件，当鼠标悬停在卡片上时，可以改变卡片内部分元素的样式，提供更多的视觉反馈。

:hover 的性能考虑

虽然 :hover 可以为网页添加丰富的交互效果，但在使用时也需要考虑性能问题。当页面中有大量元素都应用了复杂的 :hover 效果时，可能会导致浏览器渲染性能下降。特别是当 :hover 效果涉及到复杂的动画、重排或重绘操作时，性能影响更为明显。

为了优化性能，可以尽量减少 :hover 效果的复杂性，避免频繁触发重排和重绘。例如，避免在 :hover 中改变元素的布局（如改变宽度、高度、边距等），而是优先选择改变颜色、透明度、阴影等不会触发重排的属性。

:focus 伪类选择器

:focus 伪类选择器用于选择当前获得焦点的元素。在表单元素、可编辑文本区域等场景中，:focus 非常有用，它可以为用户提供清晰的视觉反馈，告知用户当前正在操作的元素。

:focus 的基本语法

:focus 伪类的语法与 :hover 类似，格式为 选择器:focus {样式规则}。例如，当输入框获得焦点时，改变其边框颜色：

input:focus {
    border - color: blue;
}

在这个例子中，当 input 输入框获得焦点时，其边框颜色会变为蓝色，让用户清楚地知道当前输入焦点所在位置。

:focus 在表单设计中的应用

表单是网站收集用户信息的重要方式，利用 :focus 可以提升表单的用户体验。

假设我们有一个简单的登录表单，HTML 代码如下：

<form>
    <label for="username">用户名：</label>
    <input type="text" id="username" name="username"><br><br>
    <label for="password">密码：</label>
    <input type="password" id="password" name="password"><br><br>
    <input type="submit" value="登录">
</form>

CSS 样式：

input:focus {
    border - color: #007BFF;
    box - shadow: 0 0 5px rgba(0, 123, 255, 0.5);
}

当输入框获得焦点时，不仅边框颜色变为蓝色（#007BFF），还会添加一个淡淡的蓝色阴影，这种视觉反馈可以帮助用户更专注于当前输入的内容，同时也提升了表单的交互感。

:focus 与可访问性

在网页开发中，可访问性是非常重要的。:focus 伪类在提升可访问性方面发挥着关键作用。屏幕阅读器等辅助技术依赖于元素的焦点状态来告知用户当前操作的位置。

通过合理设置 :focus 样式，如改变颜色、添加边框或阴影等，可以让使用辅助技术的用户更清晰地了解当前焦点所在元素。例如，对于视力障碍用户，他们使用键盘导航网页，清晰的 :focus 样式能够帮助他们准确找到可操作的元素。

:focus 与 tabindex 属性

tabindex 属性可以控制元素的 tab 顺序，与 :focus 结合使用可以进一步优化用户体验。tabindex 属性的值可以是正整数、0 或 - 1。

正整数表示该元素在 tab 顺序中的位置，0 表示该元素会按照文档流顺序参与 tab 顺序，- 1 表示该元素可以通过 JavaScript 等方式获取焦点，但不会参与 tab 顺序。

例如，我们有一个按钮，希望它在 tab 顺序中排在第二个，HTML 代码如下：

<button tabindex="2">特殊 tab 顺序按钮</button>

然后结合 :focus 样式：

button:focus {
    background - color: yellow;
}

这样，当用户通过 tab 键切换焦点到该按钮时，按钮的背景颜色会变为黄色，方便用户识别。

:focus 的兼容性问题

虽然 :focus 在现代浏览器中得到了广泛支持，但在一些较旧的浏览器中可能存在兼容性问题。特别是在 IE 浏览器系列中，对于某些元素的 :focus 样式支持可能不太理想。

为了确保兼容性，可以使用一些 CSS 前缀来处理不同浏览器的差异。例如，对于某些 WebKit 内核的浏览器（如 Safari），可能需要添加 -webkit - 前缀：

input:-webkit - focus {
    border - color: blue;
}

同时，在处理兼容性问题时，尽量使用简单且常用的 :focus 样式，避免过于复杂的效果，以确保在大多数浏览器中都能正常显示。

:nth - child 伪类选择器

:nth - child 伪类选择器允许我们根据元素在一组兄弟元素中的位置来选择元素。它在处理列表、网格等结构时非常有用，可以方便地对特定位置的元素应用不同的样式。

:nth - child 的基本语法

:nth - child 伪类的语法为 选择器:nth - child(n) {样式规则}，其中 n 可以是数字、关键字或表达式。

  1. 数字形式：直接使用数字 n 表示选择第 n 个元素。例如，选择列表中的第三个 <li> 元素：
li:nth - child(3) {
    color: red;
}

在这个例子中，列表中第三个 <li> 元素的文本颜色会变为红色。

  1. 关键字形式：
    • even 关键字表示选择偶数位置的元素。例如，选择表格中偶数行的 <tr> 元素：
tr:nth - child(even) {
    background - color: lightgray;
}

这样，表格中偶数行的背景颜色会变为浅灰色，实现隔行变色的效果，方便用户区分不同行的数据。 - odd 关键字表示选择奇数位置的元素。例如，选择列表中奇数位置的 <li> 元素：

li:nth - child(odd) {
    background - color: #f9f9f9;
}

列表中奇数位置的 <li> 元素背景颜色会变为淡灰色。

  1. 表达式形式：使用表达式 an + b，其中 a 和 b 是整数，n 从 0 开始取值。例如，2n + 1 表示选择从第一个开始，每隔两个元素中的第一个元素（即奇数位置元素，等同于 odd）；3n 表示选择位置为 3、6、9 等的元素。
div:nth - child(3n) {
    border: 1px solid green;
}

在这个例子中，div 元素中位置为 3 的倍数的元素会添加绿色边框。

:nth - child 在列表布局中的应用

在列表布局中，:nth - child 可以实现很多有趣的样式效果。比如，我们有一个无序列表，希望每隔两个列表项添加一个特殊样式。

HTML 代码：

<ul class="my - list">
    <li>列表项 1</li>
    <li>列表项 2</li>
    <li>列表项 3</li>
    <li>列表项 4</li>
    <li>列表项 5</li>
    <li>列表项 6</li>
</ul>

CSS 样式：

.my - list li:nth - child(3n + 1) {
    background - color: #e0e0e0;
    font - weight: bold;
}

在上述代码中，位置为 3n + 1（即 1、4、7 等）的列表项会有浅灰色背景和加粗字体，使列表呈现出一种特殊的视觉节奏。

:nth - child 在网格布局中的应用

在 CSS 网格布局中，:nth - child 同样可以发挥重要作用。例如，我们创建一个简单的 3x3 网格布局。

HTML 代码：

<div class="grid - container">
    <div class="grid - item">1</div>
    <div class="grid - item">2</div>
    <div class="grid - item">3</div>
    <div class="grid - item">4</div>
    <div class="grid - item">5</div>
    <div class="grid - item">6</div>
    <div class="grid - item">7</div>
    <div class="grid - item">8</div>
    <div class="grid - item">9</div>
</div>

CSS 样式：

.grid - container {
    display: grid;
    grid - template - columns: repeat(3, 1fr);
    grid - gap: 10px;
}

.grid - item:nth - child(3n) {
    background - color: #007BFF;
    color: white;
}

在这个网格布局中，位置为 3 的倍数的网格项（即 3、6、9）会有蓝色背景和白色文本，为网格布局增添了一种规律的样式变化，使页面更加美观。

:nth - child 与 CSS 计数器

CSS 计数器可以与 :nth - child 结合使用，实现自动编号等功能。例如，我们想为列表项添加自定义编号。

HTML 代码：

<ol class="numbered - list">
    <li>列表项 1</li>
    <li>列表项 2</li>
    <li>列表项 3</li>
</ol>

CSS 样式：

.numbered - list {
    counter - reset: item;
    list - style - type: none;
}

.numbered - list li:before {
    counter - increment: item;
    content: counter(item) ". ";
    color: #007BFF;
    font - weight: bold;
}

这里，我们通过 counter - reset 初始化计数器 item，然后在 li:before 伪元素中使用 counter - increment 增加计数器的值，并通过 content 属性显示计数器的值作为列表项的编号。结合 :nth - child，我们可以进一步对特定位置的列表项编号应用不同样式。例如：

.numbered - list li:nth - child(2n):before {
    color: red;
}

这样，偶数位置的列表项编号颜色会变为红色，实现更丰富的样式效果。

:nth - child 的局限性

虽然 :nth - child 功能强大，但也存在一些局限性。它是基于兄弟元素的位置进行选择的，这意味着如果文档结构发生变化，选择的元素可能也会改变。例如，如果在列表中插入或删除一个元素，原本基于位置选择的样式可能会应用到错误的元素上。

此外，:nth - child 只能根据元素在父元素中的位置进行选择，无法直接根据元素在文档中的绝对位置进行选择。在一些复杂的布局场景中，这可能无法满足所有需求。在这种情况下，可能需要结合 JavaScript 或其他 CSS 选择器来实现更精确的选择和样式控制。

在实际开发中，需要根据具体需求谨慎使用 :nth - child，充分考虑文档结构的稳定性和可能的变化，以确保样式在不同情况下都能正确应用。

通过深入理解和灵活运用 :hover、:focus 和 :nth - child 这三个 CSS 伪类选择器，前端开发者可以为网页添加丰富的交互效果和样式变化，提升用户体验和页面的美观度。同时，在使用过程中要注意性能、兼容性等问题，以确保网页在各种环境下都能正常运行。