css伪类和伪元素选择器

伪类选择器关注元素的状态和条件，而伪元素选择器则关注元素的视觉表现和扩展。两者都是CSS中强大的工具，能够帮助开发者实现复杂的样式布局和交互效果。

伪类选择器

伪类选择器在CSS中用于选择元素的特定状态或位置。以下是一些常见的伪类选择器及其使用示例：

1. :hover

用于选择鼠标悬停时的元素。

button:hover {
  background-color: blue;
}

当鼠标悬停在button元素上时，其背景颜色会变成蓝色。

2. :active

用于选择被用户激活的元素，如点击的按钮。

button:active {
  transform: scale(0.95);
}

当按钮被点击时，它会稍微缩小。

3. :focus

用于选择获得焦点的元素，如输入框。

input:focus {
  border: 2px solid red;
}

当输入框获得焦点时，其边框会变成红色。

4. :visited

用于选择用户已经访问过的链接。

a:visited {
  color: purple;
}

用户访问过的链接文字颜色会变成紫色。

5. :first-child

用于选择其父元素的第一个子元素。

ul li:first-child {
  color: green;
}

无序列表中的第一个列表项的文字颜色会变成绿色。

6. :last-child

用于选择其父元素的最后一个子元素。

ul li:last-child {
  font-weight: bold;
}

无序列表中的最后一个列表项的字体加粗。

7. :nth-child(n)

用于选择其父元素的第n个子元素。

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

无序列表中的偶数列表项的背景颜色会变成浅灰色。

8. :not(selector)

用于选择不匹配指定选择器的元素。

button:not(.disabled) {
  cursor: pointer;
}

除了class为disabled的按钮外，其他按钮的鼠标光标会变成手形。

9. :empty

用于选择没有子元素的元素。

div:empty {
  display: none;
}

没有子元素的div元素将不会显示。

10. :first-of-type 和 :last-of-type

用于选择其父元素的第一个或最后一个特定类型的子元素。

div p:first-of-type {
  font-size: 18px;
}

每个div元素中的第一个p元素的字体大小设置为18像素。

11. :checked

用于选择被选中的表单元素，如单选按钮或复选框。

input[type="checkbox"]:checked {
  border: 2px solid black;
}

被选中的复选框边框会变成黑色。
这些伪类选择器可以与基本选择器、属性选择器等其他选择器结合使用，以实现更复杂的样式效果。需要注意的是，伪类选择器的优先级通常高于普通的选择器，因此在处理样式覆盖问题时需要特别注意。

伪元素

伪元素是CSS中一种特殊的选择器，它们允许开发者在元素的特定位置插入内容或装饰。以下是伪元素的几个示例说明：

::before 伪元素

::before 伪元素用于在选定元素的内容之前插入内容。这通常与 content 属性一起使用，以定义要插入的具体内容。
示例：

p::before {
  content: "Read this";
  color: blue;
}

在这个例子中，每个 <p> 元素的内容之前都会插入文本 "Read this: "，并且这段文本的颜色为蓝色。

::after 伪元素

与 ::before 类似，::after 伪元素用于在选定元素的内容之后插入内容。
示例：

p::after {
  content: "(End of paragraph)";
  font-style: italic;
}

在这个例子中，每个 <p> 元素的内容之后都会插入一段斜体的文本 " (End of paragraph)"。

::first-line 伪元素

::first-line 伪元素用于向文本的首行应用样式。
示例：

p::first-line {
  text-transform: uppercase;
}

在这个例子中，每个 <p> 元素的首行文本都会转换为大写。

::selection 伪元素

::selection 伪元素用于定义用户选中文本时的显示样式（如背景色和文本色）。
示例：

::selection {
  background: yellow;
  color: black;
}

在这个例子中，当用户选中页面上的任何文本时，选中的文本背景色将变为黄色，文本颜色变为黑色。

这些伪元素提供了在不修改HTML结构的情况下，向页面元素添加额外内容或特殊视觉效果的能力，是CSS中非常有用的工具。需要注意的是，伪元素以双冒号(::)开头是为了区分伪类和伪元素，尽管在大多数现代浏览器中，单冒号(:)也是有效的。然而，为了遵循CSS规范，建议使用双冒号来表示伪元素。