css 伪类有哪些

1. 引言

在前端开发中，CSS是必不可少的一部分，它不仅决定了网站的外观和样式，还能够通过伪类来控制交互行为。伪类是一种用于选择元素的特殊关键字，它们可以在不添加额外标记的情况下通过CSS选择器选中元素。

2. 伪类的概念

CSS伪类是一种添加到选择器的关键字，用于指定要选择的元素的特定状态。伪类可以分为两种类型：结构伪类和行为伪类。

2.1 结构伪类

结构伪类使用HTML结构来选择元素。常用的结构伪类有：

:first-child：选取第一个子元素

:last-child：选取最后一个子元素

:nth-child(n)：选取第n个子元素，n从1开始

:nth-of-type(n)：选取第n个同类元素，n从1开始

:not(selector)：选取不符合指定选择器的元素

/* 选取第一个子元素 */

div:first-child { 
  color: red;
}
/* 选取第二个子元素 */
div:nth-child(2) { 
  color: blue;
}
/* 选取同类元素中第三个 */
p:nth-of-type(3) { 
  color: green;
}
/* 选取不是 p 元素的所有元素 */
:not(p) { 
  font-weight: bold;
}

2.2 行为伪类

行为伪类用于指定元素的状态，常用的行为伪类有：

:hover：鼠标悬停在元素上时

:active：元素被点击时

:focus：元素获得焦点时

:visited：链接已被访问时

:enabled：元素可用时

:disabled：元素不可用时

:checked：复选框或单选按钮被选中时

/* 鼠标悬停元素时改变背景色 */

a:hover {
  background-color: yellow;
}
/* 元素被点击时变为蓝色 */
button:active {
  background-color: blue;
}
/* 输入框获得焦点时改变边框样式 */
input:focus {
  border: 1px dashed red;
}
/* 已访问过的链接改变颜色 */
a:visited {
  color: purple;
}
/* 可用的按钮颜色为绿色 */
button:enabled {
  background-color: green;
}
/* 禁用的按钮颜色为灰色 */
button:disabled {
  background-color: grey;
}
/* 选中复选框时改变背景颜色 */
input[type="checkbox"]:checked {
  background-color: orange;
}

3. 伪元素

与伪类类似，伪元素是针对元素的特定部分进行样式设置，通常用于为元素的内容添加装饰，或者为文本加上特殊的效果。

3.1 before 和 after

::before 和 ::after 用于在元素的前面或后面添加内容。这些内容位于元素的实际内容之前或之后，并且在CSS中被视为虚拟元素。它们通常用于添加图标或者将卡片居中。

/* 添加箭头图标 */

li::before {
  content: "\2192\0020";
}
/* 添加白色背景块，用于居中元素 */
div::after {
  content: "";
  display: block;
  margin: auto;
  width: 50%;
  height: 50%;
  background-color: white;
}

3.2 first-line 和 first-letter

::first-line 用于设置元素中第一行的样式，而 ::first-letter 用于设置元素中第一个字母的样式。

/* 为第一行文本设置颜色为红色 */

p::first-line {
  color: red;
}
/* 为第一个字母设置字体大小为2倍 */
p::first-letter {
  font-size: 2em;
  font-weight: bold;
}

4. 总结

以上就是CSS中的伪类和伪元素的介绍，这些属性可以让我们以优雅的方式控制网站元素的样式和交互行为。通过对伪类和伪元素的灵活运用，我们可以让页面更加美观，并增强用户体验。