css中的伪类_css伪类

CSS中的伪类（pseudo-class）是选择器的一种，用于对满足特定条件的元素进行样式设置。伪类以冒号（:）开头，并跟随一个名称或一些参数。在这篇博客中，我们将介绍一些常见的伪类及其相关属性和使用方法。

:hover

:hover 伪类用于在鼠标悬停在元素上时应用样式。以下是一个例子：

a:hover {
  color: red;
}
1
2
3

这段代码将会让链接在鼠标悬停时变成红色。:hover 常用于链接、按钮等元素上。

:active

:active 伪类用于在用户点击元素且未释放鼠标时应用样式。以下是一个例子：

button:active {
  background-color: gray;
}
1
2
3

这段代码将会让按钮在用户点击时背景色变为灰色。:active 常用于按钮等交互元素上。

:focus

:focus 伪类用于在元素获得焦点时应用样式。以下是一个例子：

input:focus {
  border: 2px solid blue;
}
1
2
3

这段代码将会让输入框在获得焦点时添加一个蓝色边框。:focus 常用于表单元素上。

:first-child

:first-child 伪类用于选择父元素的第一个子元素。以下是一个例子：

ul li:first-child {
  font-weight: bold;
}
1
2
3

这段代码将会让无序列表中的第一个列表项加粗。:first-child 常用于列表、表格等元素上。

:last-child

:last-child 伪类用于选择父元素的最后一个子元素。以下是一个例子：

ul li:last-child {
  border-bottom: 1px solid gray;
}
1
2
3

这段代码将会让无序列表中的最后一个列表项添加一个灰色底部边框。:last-child 常用于列表、表格等元素上。

:nth-child()

:nth-child() 伪类用于选择父元素的第 n 个子元素。以下是一个例子：

ul li:nth-child(odd) {
  background-color: lightgray;
}
1
2
3

这段代码将会让无序列表中的奇数列表项添加浅灰色背景色。:nth-child() 可以接受参数，用于选择不同的子元素，如 odd（奇数）、even（偶数）、2n（偶数）等等。:nth-child() 常用于列表、表格等元素上。

:not()

:not() 伪类用于排除符合条件的元素。以下是一个例子：

li:not(.special) {
  color: gray;
}
1
2
3

这段代码将会让除了 class 为 special 的列表项外，其他所有列表项变为灰色。:not() 可以接受参数，用于排除符合特定条件的元素。:not() 常用于列表、表格等元素上。

总结。

以上是一些常见的 CSS 伪类及其相关属性和使用方法。熟练掌握这些伪类可以帮助我们更好地进行样式设置，提高网页的可读性和用户体验。

• 打卡12.17