【CSS篇】—— 熟悉又陌生的选择器【伪类，伪元素】

前端航海日志
199 阅读8分钟

大家好这里是前端航海日志！ 在设计CSS样式时，相信大家都接触过，伪类和伪元素。但是这两者好像又不是很常用，想用的时候又感觉有点模糊，所以下面一文将给大家讲清楚伪类和伪元素的基本使用。

MDN链接：developer.mozilla.org/zh-CN/docs/…

一、伪类和伪元素的区别

1. 定义

  • 伪类：伪类用于选择处于特定状态的元素，比如用户交互时的状态（如:hover、:active、:focus）或者元素在文档结构中的位置（如:first-child、:nth-child）。
  • 伪元素：伪元素用于向文档中某个元素的特定部分添加样式，或者在文档中生成额外的内容，比如元素的第一个字母、第一行文本、或者在元素前后插入的内容。

2. 表示

  • 伪类：伪类使用单冒号（:）表示，如:hover、:active、:first-child等。
  • 伪元素：伪元素使用双冒号（::）表示，如::before、::after、::first-letter等。在较新的 CSS 规范中，伪元素应该使用双冒号来区分它们。

3. 应用场景

  • 伪类：伪类用于选择处于特定状态的元素，如用户交互时的状态或者元素在文档结构中的位置。常用于创建交互式效果、响应用户操作。
  • 伪元素：伪元素用于向文档中某个元素的特定部分添加样式，或者在文档中生成额外的内容。常用于添加装饰性内容、调整文本样式等。

4. 兼容性

  • 伪类：伪类在各种浏览器中的支持良好，并且通常被广泛应用。
  • 伪元素：在较新的 CSS 规范中，伪元素使用双冒号表示，有些较旧的浏览器可能不支持双冒号表示的伪元素，但是为了向后兼容，它们可能会接受单冒号。

二、常见的伪类

1. :hover

:hover 伪类用于选择鼠标悬停在元素上时的状态。它允许你定义鼠标悬停时元素的样式，比如改变背景色、边框样式等。

button:hover {
  background-color: #ff0000;
}

2. :active

:active 伪类用于选择被激活的元素，通常是用户点击或按下鼠标按钮时的状态。你可以利用它来创建按钮点击效果等。

button:active {
  background-color: #00ff00;
}

3. :focus

:focus 伪类用于选择当前获得焦点的元素，通常是通过键盘或者鼠标点击使元素获得焦点时的状态。这在处理表单元素的样式时非常有用。

input:focus {
  border-color: blue;
}

4. :first-child

:first-child 伪类用于选择父元素下的第一个子元素。你可以用它来为列表的第一个元素或者其他第一个子元素应用特定的样式。

li:first-child {
  font-weight: bold;
}

5. :nth-child(n)

:nth-child(n) 伪类用于选择父元素下的第 n 个子元素，其中 n 是一个整数或者一个表达式。它允许你根据元素在父元素中的位置来选择应用样式的元素。

/* 选择父元素下的第奇数个子元素 */
li:nth-child(odd) {
  background-color: #f0f0f0;
}

三、常见的伪元素

1. ::before

::before 伪元素在被选中元素的前面插入生成的内容。它通常用于添加一些装饰性的内容，比如图标、引号等。

p::before {
  content: "\201C"; /* 左引号 */
}

2. ::after

::after 伪元素在被选中元素的后面插入生成的内容。它也常用于添加一些装饰性的内容，比如箭头、图标等。

button::after {
  content: "\2192"; /* 右箭头 */
}

3. ::first-letter

::first-letter 伪元素选择元素的第一个字母，并且允许你为它应用样式，比如改变字体大小、颜色等。

p::first-letter {
  font-size: 150%;
  color: red;
}

4. ::first-line

::first-line 伪元素选择元素的第一行文本，并且允许你为它应用样式，比如改变字体大小、颜色等。

p::first-line {
  font-size: 120%;
  font-weight: bold;
}

5. ::selection

::selection 伪元素用于选择用户选择的文本部分，并且允许你为其应用样式，比如改变背景色、文字颜色等。

::selection {
  background-color: #ffff00;
  color: #000000; 
}

四、MDN伪类伪元素总结

伪类

选择器描述
:active在用户激活（例如点击）元素的时候匹配。
:any-link匹配一个链接的:link和:visited状态。
:blank匹配空输入值的``元素。
:checked匹配处于选中状态的单选或者复选框。
:current匹配正在展示的元素，或者其上级元素。
:default匹配一组相似的元素中默认的一个或者更多的 UI 元素。
:dir基于其方向性（HTMLdir属性或者 CSSdirection属性的值）匹配一个元素。
:disabled匹配处于关闭状态的用户界面元素
:empty匹配除了可能存在的空格外，没有子元素的元素。
:enabled匹配处于开启状态的用户界面元素。
:first匹配分页媒体的第一页。
:first-child匹配兄弟元素中的第一个元素。
:first-of-type匹配兄弟元素中第一个某种类型的元素。
:focus当一个元素有焦点的时候匹配。
:focus-visible当元素有焦点，且焦点对用户可见的时候匹配。
:focus-within匹配有焦点的元素，以及子代元素有焦点的元素。
:future匹配当前元素之后的元素。
:hover当用户悬浮到一个元素之上的时候匹配。
:indeterminate匹配未定态值的 UI 元素，通常为复选框。
:in-range用一个区间匹配元素，当值处于区间之内时匹配。
:invalid匹配诸如<input>的位于不可用状态的元素。
:lang基于语言（HTMLlang属性的值）匹配元素。
:last-child匹配兄弟元素中最末的那个元素。
:last-of-type匹配兄弟元素中最后一个某种类型的元素。
:left在分页媒体中，匹配左手边的页。
:link匹配未曾访问的链接。
:local-link匹配指向和当前文档同一网站页面的链接。
:is()匹配传入的选择器列表中的任何选择器。
:not匹配作为值传入自身的选择器未匹配的物件。
:nth-child匹配一列兄弟元素中的元素——兄弟元素按照an+b形式的式子进行匹配（比如 2n+1 匹配元素 1、3、5、7 等。即所有的奇数个）。
:nth-of-type匹配某种类型的一列兄弟元素（比如，<p>元素）——兄弟元素按照an+b形式的式子进行匹配（比如 2n+1 匹配元素 1、3、5、7 等。即所有的奇数个）。
:nth-last-child匹配一列兄弟元素，从后往前倒数。兄弟元素按照an+b形式的式子进行匹配（比如 2n+1 匹配按照顺序来的最后一个元素，然后往前两个，再往前两个，诸如此类。从后往前数的所有奇数个）。
:nth-last-of-type匹配某种类型的一列兄弟元素（比如，<p>元素），从后往前倒数。兄弟元素按照an+b形式的式子进行匹配（比如 2n+1 匹配按照顺序来的最后一个元素，然后往前两个，再往前两个，诸如此类。从后往前数的所有奇数个）。
:only-child匹配没有兄弟元素的元素。
:only-of-type匹配兄弟元素中某类型仅有的元素。
:optional匹配不是必填的 form 元素。
:out-of-range按区间匹配元素，当值不在区间内的时候匹配。
:past匹配当前元素之前的元素。
:placeholder-shown匹配显示占位文字的 input 元素。
:playing匹配代表音频、视频或者相似的能“播放”或者“暂停”的资源的，且正在“播放”的元素。
:paused匹配代表音频、视频或者相似的能“播放”或者“暂停”的资源的，且正在“暂停”的元素。
:read-only匹配用户不可更改的元素。
:read-write匹配用户可更改的元素。
:required匹配必填的 form 元素。
:right在分页媒体中，匹配右手边的页。
:root匹配文档的根元素。
:scope匹配任何为参考点元素的元素。
:valid匹配诸如<input>元素的处于可用状态的元素。
:target匹配当前 URL 目标的元素（例如如果它有一个匹配当前URL 分段的元素）。
:visited匹配已访问链接。

伪元素

选择器描述
::after匹配出现在原有元素的实际内容之后的一个可样式化元素。
::before匹配出现在原有元素的实际内容之前的一个可样式化元素。
::first-letter匹配元素的第一个字母。
::first-line匹配包含此伪元素的元素的第一行。
::grammar-error匹配文档中包含了浏览器标记的语法错误的那部分。
::selection匹配文档中被选择的那部分。
::spelling-error匹配文档中包含了浏览器标记的拼写错误的那部分。

感谢大家的支持！如果这篇文章帮到你，别忘了点赞 ❤、收藏⭐，让我们在前端的航海路上继续扬帆起航！

avatar
文章
阅读
粉丝