请解释伪类 (Pseudo-classes) 和伪元素 (Pseudo-elements) 的区别和作用，并分别列举几个常用的。-JavaScript中文网-JavaScript教程资源分享门户

本题详细解读

伪类 (Pseudo-classes)

伪类主要用于根据元素的状态或位置来选择元素，它们不会创建新的元素，而是对现有元素进行样式化。

常用伪类举例及详解：

:hover：当鼠标指针悬停在元素上方时，应用样式。常用于创建交互效果，如按钮颜色改变、显示提示信息等。
```
a:hover {
  color: red;
}
```
:focus：当元素获取焦点时（例如用户点击输入框），应用样式。用于提升表单的可用性。
```
input:focus {
  border-color: blue;
}
```
:active：当元素被激活时（例如用户点击鼠标按钮但尚未松开），应用样式。常用于按钮点击效果。
```
button:active {
  background-color: gray;
}
```
:first-child / :last-child：选择父元素中的第一个或最后一个子元素。常用于列表或表格的样式设置。
```
ul li:first-child {
  font-weight: bold;
}
```
:nth-child(n) / :nth-last-child(n)：选择父元素中指定顺序的子元素，n 可以是数字、odd（奇数）或 even（偶数）。
```
ul li:nth-child(2n) {
  background-color: #f0f0f0;
} /* 为偶数项列表设置背景色 */
```
:disabled / :enabled：选择被禁用或启用的表单元素。用于根据表单状态设置样式。
```
input:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
```
:visited / :link：选择用户已访问或未访问的链接。
```
a:visited {
    color: gray;
}
```
:not(selector): 否定选择器，选择不符合给定选择器的元素
```
ul li:not(:last-child){
   border-bottom:1px solid #ccc;
}
```

伪元素 (Pseudo-elements)

伪元素用于创建虚拟元素，它们可以用来添加内容或对元素的部分进行样式化。伪元素是抽象的，不真正存在于 HTML 结构中。

常用伪元素举例及详解：

::before / ::after：在元素内容的前面或后面插入内容。常用于添加装饰性的内容，例如图标、分隔线，以及实现一些复杂的布局。

// www.javascriptcn.com code example
.box::before {
  content: "";
  display: block;
  width: 20px;
  height: 20px;
  background-color: red;
  position: absolute;
  top: 0;
  left: 0;
}

::first-line：选择元素的第一行文本。
```
p::first-line {
  font-weight: bold;
}
```
::first-letter：选择元素的第一个字母。常用于实现首字放大效果。
```
p::first-letter {
  font-size: 2em;
  float: left;
}
```
::selection：选择用户选中的文本。可以改变选中时的背景颜色和文本颜色。
```
::selection {
  background-color: yellow;
  color: black;
}
```
::placeholder：改变输入框占位符的样式
```
 input::placeholder{
    color: #aaa;
  }
```

::marker: 改变列表项标记的样式

ul::marker {
    color: red;
    font-size: 1.2em;
  }

注意：

在 CSS2 中，伪元素使用单冒号 :，但在 CSS3 中建议使用双冒号 ::。为了兼容性，大多数浏览器仍然支持单冒号语法。但为了遵循标准，应尽量使用双冒号。
::before 和 ::after 伪元素必须结合 content 属性使用，否则不会显示。
伪元素不能被脚本访问，它们不属于 DOM 结构。

请解释伪类 (Pseudo-classes) 和伪元素 (Pseudo-elements) 的区别和作用，并分别列举几个常用的。

推荐答案

本题详细解读

伪类 (Pseudo-classes)

伪元素 (Pseudo-elements)