CSS（三）-- 伪类选择器与伪元素选择器

目录

“伪”是什么？

1.  伪类选择器

2.  伪元素选择器

---

“伪”是什么？

• “伪”是指该选择器用来修饰不在文档树中的部分。
• 必读：超级详细解说

1.  伪类选择器

用于当已有元素处于的某个状态（如，鼠标悬浮）时，为其添加对应的样式，这个状态是根据用户行为而动态变化的。

实例演示：

1. 链接样式：可以用伪类选择器设置不同状态下的链接样式，如未访问过链接、访问过链接、鼠标悬停链接等。

a:link {
  color: blue;
}
 a:visited {
  color: green;
}
 a:hover {
  color: red;
}

2. 表单元素：可以用伪类选择器设置表单元素在不同状态下的样式，如焦点、悬停、选中等。

input:focus {
  background-color: yellow;
}
 input:hover {
  background-color: lightblue;
}
 input:checked {
  border: 2px solid red;
}

3. 第一个、最后一个、奇数偶数元素：可以用伪类选择器选择第一个、最后一个以及奇数偶数位置上的元素，并应用相应的样式。

li:first-child {
  font-weight: bold;
}
 li:last-child {
  font-style: italic;
}
 p:nth-child(odd) {
  color: blue;
}
 p:nth-child(even) {
  color: green;
}

4. 已被禁用的元素：可以用伪类选择器选取已经被禁用的表单元素，并应用相应的样式。

input:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

伪类选择器的常用方法：

方法	说明
:hover	选择鼠标指针浮动在其上的元素
:visited	选择已访问的链接
:link	选择未访问的链接
:active	选择活动的链接
:focus	选择获取焦点的输入字段
:not	一个否定伪类，用于匹配不符合参数选择器的元素。
:first-child	匹配元素的第一个子元素。
:last-child	匹配元素的最后一个子元素。
:first-of-type	匹配属于其父元素的首个特定类型的子元素的每个元素。
:last-of-type	匹配元素的最后一个子元素。
:only-child	当元素是其父元素中唯一一个子元素时，:only-child 匹配该元素。
:only-of-type	当元素是其父元素中唯一一个特定类型的子元素时，:only-of-type 匹配该元素。

2.  伪元素选择器

用于创建一些不存在于文档树（即dom树）中的元素，并为其添加样式。

实例演示：

1. 插入内容：可以用伪元素选择器 ::before 和 ::after 在元素的前面或后面插入内容，比如加入引号、图标等。

p::before {
  content: "“";
}
p::after {
  content: "”";
}

2. 第一行、第一字母：可以用伪元素选择器 ::first-line 和 ::first-letter 给元素的第一行或第一个字母应用样式。

h1::first-letter {
  font-size: 2.5em;
  font-weight: bold;
}
p::first-line {
  color: red;
  font-weight: bold;
}

3. 清除浮动：可以用伪元素选择器 ::after 清除浮动影响，避免父元素因子元素浮动引起的高度塌陷问题。

.clearfix::after {
  content: "";
  display: block;
  clear: both;
}

4. 设置文本选择时的样式：可以用伪元素选择器 ::selection 给用户选择文本时的背景色、颜色等添加样式。

::selection {
  background-color: yellow;
  color: red;
}

5. 使用 ::marker 伪元素选择器可以设置列表项的标记符号的样式，例如指定它的颜色或将它移动到列表项的外部。

ul li::marker {
  content:'★';
  color: red;
  margin-right:5px;
}

伪元素选择器的常用方法：

方法	说明
::before/:before	:before 在被选元素前插入内容。需要使用 content 属性来指定要插入的内容。被插入的内容实际上不在文档树中。
::after/:after	:after 在被元素后插入内容，其用法和特性与:before 相似。
::first-letter/:first-letter	:first-letter 匹配元素中文本的首字母。被修饰的首字母不在文档树中。
::first-line/:first-line	:first-line 匹配元素中第一行的文本。这个伪元素只能用在块元素中，不能用在内联元素中。
::selection	::selection 匹配用户被用户选中或者处于高亮状态的部分。在火狐浏览器使用时需要添加-moz 前缀。该伪元素只支持双冒号的形式。
::placeholder	::placeholder 匹配占位符的文本，只有元素设置了 placeholder 属性时，该伪元素才能生效。 该伪元素不是 CSS 的标准，它的实现可能在将来会有所改变，所以要决定使用时必须谨慎。
::backdrop	::backdrop 用于改变全屏模式下的背景颜色，全屏模式的默认颜色为黑色。该伪元素只支持双冒号的形式。

 继续学习之路：

CSS（一）-- 三种样式表

CSS（二）-- 选择器的运用（针对基本选择器和复合选择器的详细解析）

CSS（三）-- 伪类选择器与伪元素选择器

CSS（四）-- 针对字体、文本的常用基本属性

如果对你有帮助，请帮我点一下赞，我才有动力继续创作，谢谢！