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

CSS 伪类选择器在交互设计中的应用

2022-03-143.1k 阅读

一、CSS 伪类选择器概述

CSS 伪类选择器是 CSS 中的一种特殊选择器，它允许开发者根据元素的特定状态或位置来选择和设置样式，而无需在 HTML 中添加额外的类或 ID。伪类选择器通过在选择器后添加冒号（:）和伪类名称来使用。例如，:hover 伪类用于选择当鼠标悬停在元素上时的状态。伪类选择器极大地增强了 CSS 的表达能力，为网页的交互设计提供了丰富的可能性。

1.1 动态伪类

动态伪类主要用于反映元素与用户交互的状态。常见的动态伪类包括 :hover、:active 和 :focus。

1.1.1 :hover 伪类

:hover 伪类用于选择当鼠标指针悬停在元素上时的状态。这在创建导航栏、按钮等交互元素时非常有用。例如，当用户将鼠标悬停在导航栏的菜单项上时，可以改变菜单项的颜色或背景色，以提供视觉反馈。

nav a:hover {
  color: red;
  background-color: lightgray;
}

在上述代码中，当鼠标悬停在 nav 元素内的 a 元素（通常是导航链接）上时，链接的文本颜色将变为红色，背景颜色将变为浅灰色。

1.1.2 :active 伪类

:active 伪类用于选择当元素被激活（例如，鼠标按下但未释放）时的状态。在按钮点击的瞬间，通过 :active 伪类可以改变按钮的样式，给用户一种点击的反馈。

button:active {
  background-color: green;
  transform: scale(0.95);
}

上述代码使得按钮在被点击激活时，背景颜色变为绿色，并且按钮会稍微缩小（通过 transform: scale(0.95)），模拟按下的效果。

1.1.3 :focus 伪类

:focus 伪类用于选择当元素获得焦点时的状态。在表单元素（如输入框、文本area等）中，当用户点击或通过键盘导航使元素获得焦点时，可以通过 :focus 伪类来突出显示该元素，以便用户清楚地知道当前输入的位置。

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

在上述代码中，当 input 输入框获得焦点时，其边框颜色将变为蓝色，并添加一个蓝色的阴影，使输入框更加醒目。

1.2 目标伪类

目标伪类主要与页面的锚点链接相关，通过它可以根据 URL 中的片段标识符（哈希值）来选择页面中的元素。常见的目标伪类是 :target。

1.2.1 :target 伪类

:target 伪类用于选择当前 URL 中片段标识符所指向的目标元素。例如，在一个页面中有多个章节，通过点击目录中的链接可以跳转到相应的章节，使用 :target 伪类可以突出显示当前跳转到的章节标题。

<ul>
  <li><a href="#chapter1">第一章</a></li>
  <li><a href="#chapter2">第二章</a></li>
</ul>

<h2 id="chapter1">第一章</h2>
<p>这里是第一章的内容。</p>

<h2 id="chapter2">第二章</h2>
<p>这里是第二章的内容。</p>

h2:target {
  background-color: yellow;
}

在上述代码中，当用户点击目录中的链接跳转到相应的章节标题（h2 元素）时，该章节标题的背景颜色将变为黄色，方便用户定位当前所在的章节。

1.3 语言伪类

语言伪类 :lang() 允许根据元素的语言属性来选择元素。这在多语言网站中，根据不同的语言设置不同的样式非常有用。

1.3.1 :lang() 伪类

假设一个网页有英文和中文两种语言版本，并且通过 lang 属性来标识不同语言的元素。

<p lang="en">This is an English paragraph.</p>
<p lang="zh">这是一个中文段落。</p>

p:lang(en) {
  font-family: Arial, sans-serif;
}

p:lang(zh) {
  font-family: "Microsoft YaHei", sans-serif;
}

在上述代码中，通过 :lang(en) 选择英文段落，并设置其字体为 Arial 等英文字体；通过 :lang(zh) 选择中文段落，并设置其字体为微软雅黑等中文字体，以适应不同语言的显示需求。

1.4 UI 状态伪类

UI 状态伪类主要用于选择用户界面元素的特定状态，如表单元素的 :enabled、:disabled 和 :checked 等。

1.4.1 :enabled 和 :disabled 伪类

:enabled 伪类用于选择启用状态的表单元素，而 :disabled 伪类用于选择禁用状态的表单元素。这可以用于设置不同状态下表单元素的样式。

<input type="text" value="启用的输入框" />
<input type="text" value="禁用的输入框" disabled />

input:enabled {
  background-color: white;
}

input:disabled {
  background-color: lightgray;
  color: gray;
}

在上述代码中，启用的输入框背景颜色为白色，而禁用的输入框背景颜色为浅灰色，文本颜色为灰色，直观地显示出元素的可用和不可用状态。

1.4.2 :checked 伪类

:checked 伪类用于选择被选中的单选按钮（input[type="radio"]）或复选框（input[type="checkbox"]）。通过这个伪类，可以根据用户的选择状态来改变相关元素的样式。

<input type="checkbox" id="option1" />
<label for="option1">选项1</label>

<input type="checkbox" id="option2" />
<label for="option2">选项2</label>

input:checked + label {
  color: blue;
}

在上述代码中，当复选框被选中时，与其关联的 label 元素的文本颜色将变为蓝色，给用户一个视觉反馈，表明该选项已被选中。

1.5 结构伪类

结构伪类允许根据文档的结构来选择元素，如元素在文档树中的位置、子元素的数量等。常见的结构伪类有 :first-child、:last-child、:nth-child()、:nth-of-type() 等。

1.5.1 :first-child 和 :last-child 伪类

:first-child 伪类用于选择其父元素的第一个子元素，:last-child 伪类用于选择其父元素的最后一个子元素。例如，在一个无序列表中，可以突出显示第一个和最后一个列表项。

<ul>
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
</ul>

li:first-child {
  font-weight: bold;
}

li:last-child {
  text-decoration: underline;
}

在上述代码中，第一个列表项的字体加粗，最后一个列表项添加下划线，通过这两个伪类突出显示列表的开头和结尾元素。

1.5.2 :nth-child() 伪类

:nth-child() 伪类用于选择其父元素的第 n 个子元素。它接受一个参数，可以是具体的数字、关键字（如 even 表示偶数，odd 表示奇数）或表达式。

<ul>
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
  <li>列表项4</li>
  <li>列表项5</li>
</ul>

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

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

li:nth-child(3n + 1) {
  text-decoration: italic;
}

在上述代码中，第二个列表项的文本颜色变为红色；偶数位置的列表项背景颜色变为浅蓝色；位置符合 3n + 1 表达式（即第 1、4、7 等项）的列表项文本变为斜体，通过 :nth-child() 伪类可以灵活地选择特定位置的元素并设置样式。

1.5.3 :nth-of-type() 伪类

:nth-of-type() 伪类与 :nth-child() 类似，但它是根据元素的类型来选择。例如，在一个包含多种元素的父元素中，只想选择特定类型元素的第 n 个。

<div>
  <p>段落1</p>
  <span>文本1</span>
  <p>段落2</p>
  <span>文本2</span>
</div>

p:nth-of-type(2) {
  color: green;
}

在上述代码中，只会选择第二个 p 元素并将其文本颜色设置为绿色，而不会受到其他类型元素（如 span）的影响，这与 :nth-child() 有所不同，:nth-child() 是按照所有子元素的顺序来选择。

1.6 否定伪类

否定伪类 :not() 允许选择不符合特定选择器的元素。它可以用来排除某些元素，避免重复设置样式。

1.6.1 :not() 伪类

例如，在一个列表中，除了第一个列表项外，其他列表项都应用某种样式。

<ul>
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
</ul>

li:not(:first-child) {
  margin-left: 20px;
}

在上述代码中，通过 :not(:first-child) 选择除了第一个列表项之外的所有列表项，并为它们添加左边距，使这些列表项有一定的缩进效果，而第一个列表项不受影响。

二、CSS 伪类选择器在导航栏设计中的应用

导航栏是网页交互设计的重要组成部分，它为用户提供了浏览网站不同页面和内容的途径。CSS 伪类选择器在导航栏的设计中起着关键作用，能够实现丰富的交互效果，提升用户体验。

2.1 导航栏链接的悬停效果

通过 :hover 伪类可以为导航栏链接添加悬停效果，当用户将鼠标指针悬停在链接上时，改变链接的外观，如颜色、背景色、字体样式等，以提示用户该链接可点击。

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

nav ul li a {
  display: block;
  padding: 10px 20px;
  text-decoration: none;
  color: black;
}

nav ul li a:hover {
  color: white;
  background-color: blue;
}

在上述代码中，导航栏链接默认显示为黑色文本，没有下划线，有一定的内边距。当鼠标悬停在链接上时，文本颜色变为白色，背景颜色变为蓝色，这种明显的颜色变化吸引用户的注意力，告知用户当前链接处于可交互状态。

2.2 导航栏链接的激活效果

:active 伪类用于设置导航栏链接在被点击激活时的样式。当用户点击链接的瞬间，改变链接的样式可以给用户提供即时的反馈，让用户知道他们的操作已被识别。

nav ul li a:active {
  background-color: green;
  transform: scale(0.98);
}

在上述代码中，当导航栏链接被点击激活时，背景颜色变为绿色，同时链接会稍微缩小（通过 transform: scale(0.98)），这种效果模拟了物理按钮按下的感觉，增强了用户与导航栏的交互体验。

2.3 当前页面导航栏链接的突出显示

在单页应用或多页面网站中，需要突出显示当前页面所对应的导航栏链接，以便用户清楚地知道自己所在的位置。这可以通过 :target 伪类或者根据页面加载时添加特定类来实现。

假设导航栏链接对应不同的页面或页面中的不同部分，并且通过哈希值来定位。

<nav>
  <ul>
    <li><a href="#home">首页</a></li>
    <li><a href="#products">产品</a></li>
    <li><a href="#about">关于我们</a></li>
    <li><a href="#contact">联系我们</a></li>
  </ul>
</nav>

<section id="home">
  <h2>首页内容</h2>
</section>

<section id="products">
  <h2>产品内容</h2>
</section>

<section id="about">
  <h2>关于我们内容</h2>
</section>

<section id="contact">
  <h2>联系我们内容</h2>
</section>

nav ul li a:target {
  color: red;
  font-weight: bold;
}

在上述代码中，当用户通过导航栏链接跳转到相应的页面部分时，该链接的文本颜色变为红色，字体加粗，突出显示当前所在页面的导航项，方便用户在网站中定位自己的位置。

三、CSS 伪类选择器在表单设计中的应用

表单是收集用户输入信息的重要组件，良好的表单交互设计可以提高用户输入的准确性和效率。CSS 伪类选择器在表单设计中可以实现各种交互效果，使表单更加易用和美观。

3.1 输入框的焦点效果

:focus 伪类用于设置输入框获得焦点时的样式。当用户点击或通过键盘导航使输入框获得焦点时，突出显示输入框可以帮助用户清楚地知道当前输入的位置。

<label for="name">姓名：</label>
<input type="text" id="name" />

<label for="email">邮箱：</label>
<input type="email" id="email" />

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

在上述代码中，当输入框获得焦点时，其边框颜色变为蓝色，并添加一个蓝色的阴影，这种视觉变化引导用户注意当前正在输入的输入框，提高输入的准确性。

3.2 禁用表单元素的样式

:disabled 伪类用于设置禁用状态的表单元素的样式。在某些情况下，可能需要禁用某些表单元素，如根据用户的权限或特定条件。通过设置禁用元素的样式，可以直观地告知用户该元素不可用。

<input type="text" value="启用的输入框" />
<input type="text" value="禁用的输入框" disabled />

<button disabled>禁用的按钮</button>
<button>启用的按钮</button>

input:disabled,
button:disabled {
  background-color: lightgray;
  color: gray;
  cursor: not-allowed;
}

在上述代码中，禁用的输入框和按钮背景颜色变为浅灰色，文本颜色变为灰色，并且鼠标指针悬停在上面时显示为禁止符号（通过 cursor: not-allowed），清楚地向用户传达这些元素当前不可用的信息。

3.3 复选框和单选按钮的选中效果

:checked 伪类用于设置复选框和单选按钮被选中时的样式。通过改变选中时的样式，可以给用户提供视觉反馈，确认他们的选择。

<input type="checkbox" id="option1" />
<label for="option1">选项1</label>

<input type="checkbox" id="option2" />
<label for="option2">选项2</label>

<input type="radio" id="genderMale" name="gender" />
<label for="genderMale">男</label>

<input type="radio" id="genderFemale" name="gender" />
<label for="genderFemale">女</label>

input[type="checkbox"]:checked + label,
input[type="radio"]:checked + label {
  color: blue;
}

input[type="checkbox"]:checked:before {
  content: "✓";
  display: inline-block;
  margin-right: 5px;
}

在上述代码中，当复选框或单选按钮被选中时，与其关联的 label 元素文本颜色变为蓝色。对于复选框，还在 label 之前添加一个选中标记（通过 content: "✓"），进一步明确用户的选择状态。

四、CSS 伪类选择器在卡片式布局中的应用

卡片式布局在现代网页设计中广泛应用，它可以将相关的信息组织在一起，以简洁美观的方式展示给用户。CSS 伪类选择器可以为卡片式布局添加交互效果，提升用户与卡片的互动体验。

4.1 卡片的悬停效果

通过 :hover 伪类可以为卡片添加悬停效果，当用户将鼠标悬停在卡片上时，改变卡片的外观，如背景颜色、透明度、添加阴影等，以吸引用户的注意力并提示卡片可点击或有更多操作。

<div class="card">
  <img src="image.jpg" alt="图片" />
  <h3>卡片标题</h3>
  <p>卡片描述内容。</p>
</div>

.card {
  width: 300px;
  border: 1px solid lightgray;
  border-radius: 5px;
  padding: 15px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.card:hover {
  background-color: lightblue;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
  transform: scale(1.05);
}

在上述代码中，卡片默认有一个浅灰色边框、圆角、内边距和轻微的阴影。当鼠标悬停在卡片上时，背景颜色变为浅蓝色，阴影加深，卡片稍微放大（通过 transform: scale(1.05)），给用户一种卡片被激活的感觉，吸引用户进一步探索卡片内容。

4.2 卡片的选中效果（类似单选或多选）

在某些卡片式布局中，可能需要实现类似单选或多选的功能，让用户选择特定的卡片。可以通过结合 :checked 伪类和一些隐藏的复选框或单选按钮来实现卡片的选中效果。

<input type="radio" id="card1" name="cardGroup" style="display: none;" />
<label for="card1" class="card">
  <img src="image1.jpg" alt="图片1" />
  <h3>卡片1标题</h3>
  <p>卡片1描述内容。</p>
</label>

<input type="radio" id="card2" name="cardGroup" style="display: none;" />
<label for="card2" class="card">
  <img src="image2.jpg" alt="图片2" />
  <h3>卡片2标题</h3>
  <p>卡片2描述内容。</p>
</label>

.card {
  width: 300px;
  border: 1px solid lightgray;
  border-radius: 5px;
  padding: 15px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  cursor: pointer;
}

input[type="radio"]:checked + label.card {
  background-color: yellow;
  border-color: orange;
  box-shadow: 0 0 15px rgba(255, 165, 0, 0.5);
}

在上述代码中，通过隐藏的单选按钮和与之关联的 label 元素来表示卡片。当某个单选按钮被选中时（即对应的卡片被“选中”），该卡片的背景颜色变为黄色，边框颜色变为橙色，并添加一个橙色的阴影，突出显示被选中的卡片，实现类似单选卡片的效果。

五、CSS 伪类选择器在响应式设计中的应用

随着移动设备的广泛使用，响应式设计变得至关重要。CSS 伪类选择器在响应式设计中也能发挥作用，帮助实现根据不同设备屏幕尺寸或方向的交互效果。

5.1 媒体查询与伪类结合

媒体查询允许根据设备的屏幕尺寸、分辨率、方向等条件来应用不同的 CSS 样式。结合伪类选择器，可以实现更丰富的响应式交互。

例如，在移动设备上，当屏幕宽度小于 600px 时，导航栏可能会以折叠菜单的形式显示，并且当菜单展开时，可以通过 :active 或 :focus 伪类来设置菜单选项的交互效果。

<nav>
  <button id="menuToggle">菜单</button>
  <ul id="mainMenu">
    <li><a href="#">首页</a></li>
    <li><a href="#">产品</a></li>
    <li><a href="#">关于我们</a></li>
    <li><a href="#">联系我们</a></li>
  </ul>
</nav>

/* 桌面端导航栏样式 */
#mainMenu {
  display: flex;
  list-style-type: none;
  margin: 0;
  padding: 0;
}

#mainMenu li a {
  display: block;
  padding: 10px 20px;
  text-decoration: none;
  color: black;
}

#mainMenu li a:hover {
  color: white;
  background-color: blue;
}

/* 移动端导航栏样式 */
@media (max-width: 600px) {
  #mainMenu {
    display: none;
  }

  #menuToggle {
    display: block;
    padding: 10px 20px;
    background-color: lightgray;
    border: none;
    cursor: pointer;
  }

  #menuToggle:active,
  #menuToggle:focus {
    background-color: gray;
  }

  #mainMenu.active {
    display: block;
  }

  #mainMenu li {
    margin: 10px 0;
  }

  #mainMenu li a {
    padding: 10px;
  }
}

在上述代码中，当屏幕宽度大于 600px 时，导航栏以水平排列的菜单形式显示，并且有常规的链接悬停效果。当屏幕宽度小于等于 600px 时，导航栏折叠，显示一个菜单按钮。当菜单按钮被点击激活或获得焦点时，背景颜色改变。点击菜单按钮后，通过 JavaScript 为 #mainMenu 添加 active 类，使其显示出来，并且在移动端有不同的菜单选项样式。

5.2 设备方向改变的交互

通过媒体查询结合 :landscape 和 :portrait 伪类，可以根据设备的方向（横向或纵向）来设置不同的交互效果。

/* 纵向屏幕样式 */
@media (orientation: portrait) {
  body {
    background-color: lightblue;
  }
}

/* 横向屏幕样式 */
@media (orientation: landscape) {
  body {
    background-color: lightgreen;
  }
}

在上述代码中，当设备处于纵向模式时，页面背景颜色为浅蓝色；当设备处于横向模式时，页面背景颜色为浅绿色。这种根据设备方向的样式变化可以为用户提供更适配不同设备使用场景的交互体验。

六、CSS 伪类选择器应用的注意事项

在使用 CSS 伪类选择器进行交互设计时，有一些注意事项需要牢记，以确保设计的有效性和兼容性。

6.1 兼容性问题

不同的浏览器对 CSS 伪类选择器的支持程度可能有所不同。虽然大多数现代浏览器对常见的伪类选择器都有良好的支持，但一些较新的或不太常用的伪类可能存在兼容性问题。例如，某些旧版本的浏览器可能不支持 :nth-of-type() 等结构伪类。为了确保网页在各种浏览器上都能正常显示交互效果，建议进行充分的浏览器测试，并可以使用 CSS 前缀来处理兼容性问题。例如，对于一些涉及到动画或变换的效果，可能需要添加 -webkit-、-moz-、-ms- 等前缀。

6.2 性能考虑

过多地使用复杂的伪类选择器，尤其是结构伪类如 :nth-child() 和 :nth-of-type()，可能会影响页面的渲染性能。这是因为浏览器在解析这些选择器时需要遍历文档树来确定匹配的元素。在大型文档中，这种遍历可能会消耗较多的资源和时间。因此，在使用这些伪类时，应尽量避免过度复杂的表达式，并且在性能敏感的区域谨慎使用。如果可能，可以通过添加类名的方式来替代一些复杂的伪类选择，以提高性能。

6.3 可访问性

在设计交互效果时，要确保伪类选择器的应用不会影响网站的可访问性。例如，对于 :hover 效果，不能仅依赖鼠标悬停来显示重要信息或操作，因为使用键盘导航或屏幕阅读器的用户无法触发 :hover 状态。对于这类情况，可以同时提供 :focus 效果，使键盘用户也能获得相同的交互体验。此外，对于颜色变化的交互效果，要确保颜色对比度符合可访问性标准，以便视力障碍用户能够清晰地识别。

6.4 语义化

虽然伪类选择器可以实现丰富的交互效果，但在使用时应尽量保持 HTML 的语义化。避免为了实现某种样式效果而过度依赖伪类选择器来改变元素的外观，导致 HTML 结构失去语义。例如，不应使用 :before 或 :after 伪元素来替代具有语义的 HTML 标签。保持语义化的 HTML 结构有助于搜索引擎优化（SEO），也使代码更易于维护和理解。