跳到主要内容

CSS 伪类选择器

什么是CSS伪类选择器？​

CSS伪类选择器（Pseudo-class Selector）是一种用于选择HTML元素特定状态或位置的选择器。它们允许你根据元素的状态（如鼠标悬停、被点击、被访问等）或其在文档中的位置（如第一个子元素、最后一个子元素等）来应用样式。伪类选择器以冒号（:）开头，例如 :hover、:first-child 等。

伪类选择器是CSS中非常强大的工具，能够让你在不修改HTML结构的情况下，为页面添加动态和交互效果。

常见的CSS伪类选择器​

以下是一些常见的CSS伪类选择器及其用法：

1. :hover​

:hover 伪类选择器用于选择鼠标悬停在元素上的状态。通常用于为链接或按钮添加悬停效果。

css
a:hover {
  color: red;
  text-decoration: underline;
}

示例：

html
<a href="#">悬停我试试</a>

效果： 当鼠标悬停在链接上时，链接文字会变成红色并带有下划线。

2. :active​

:active 伪类选择器用于选择元素被激活（即被点击）时的状态。

css
button:active {
  background-color: green;
}

示例：

html
<button>点击我</button>

效果： 当按钮被点击时，按钮的背景颜色会变成绿色。

3. :focus​

:focus 伪类选择器用于选择获得焦点的元素，通常用于表单输入框。

css
input:focus {
  border-color: blue;
  outline: none;
}

示例：

html
<input type="text" placeholder="输入内容">

效果： 当输入框获得焦点时，边框颜色会变成蓝色。

4. :first-child 和 :last-child​

:first-child 伪类选择器用于选择父元素中的第一个子元素，而 :last-child 用于选择最后一个子元素。

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

li:last-child {
  color: gray;
}

示例：

html
<ul>
  <li>第一个项目</li>
  <li>第二个项目</li>
  <li>最后一个项目</li>
</ul>

效果： 第一个列表项会加粗显示，最后一个列表项会变成灰色。

5. :nth-child()​

:nth-child() 伪类选择器允许你选择父元素中的第n个子元素。你可以使用数字、关键字（如 odd 和 even）或公式来指定子元素的位置。

css
li:nth-child(2n) {
  background-color: lightgray;
}

示例：

html
<ul>
  <li>项目1</li>
  <li>项目2</li>
  <li>项目3</li>
  <li>项目4</li>
</ul>

效果： 每隔一个列表项的背景颜色会变成浅灰色。

实际应用场景​

1. 导航栏悬停效果​

在导航栏中，通常希望当用户将鼠标悬停在菜单项上时，菜单项的背景颜色或文字颜色发生变化。这时可以使用 :hover 伪类选择器。

css
.nav-item:hover {
  background-color: #f0f0f0;
  color: #333;
}

2. 表单输入框焦点样式​

当用户点击输入框时，通常希望输入框的样式发生变化以提示用户当前正在输入。这时可以使用 :focus 伪类选择器。

css
input:focus {
  border: 2px solid #007bff;
  box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
}

3. 表格隔行变色​

在表格中，通常希望每隔一行有不同的背景颜色以提高可读性。这时可以使用 :nth-child() 伪类选择器。

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

tr:nth-child(even) {
  background-color: #e9e9e9;
}

总结​

CSS伪类选择器是CSS中非常强大的工具，能够让你根据元素的状态或位置来应用样式。通过使用伪类选择器，你可以为网页添加动态和交互效果，而无需修改HTML结构。常见的伪类选择器包括 :hover、:active、:focus、:first-child、:last-child 和 :nth-child() 等。

附加资源与练习​

  • 练习1： 创建一个导航栏，并使用 :hover 伪类选择器为菜单项添加悬停效果。
  • 练习2： 创建一个表单，并使用 :focus 伪类选择器为输入框添加焦点样式。
  • 练习3： 创建一个表格，并使用 :nth-child() 伪类选择器为表格行添加隔行变色效果。
提示

你可以通过浏览器的开发者工具（按 F12 或 Ctrl+Shift+I）来实时查看和调试CSS伪类选择器的效果。