收藏版|70+超全的伪类伪元素集合

最新推荐文章于 2023-10-27 23:56:06 发布

灵扁扁

最新推荐文章于 2023-10-27 23:56:06 发布

阅读量95

点赞数

文章标签：前端 javascript html 开发语言 ecmascript

本文链接：https://blog.csdn.net/weixin_42414790/article/details/132980554

版权

本文详细介绍了伪类和伪元素的概念、语法、区别以及实战应用，涵盖了:hover、:active、:first-child等常见伪类和::before、::after等伪元素的实例。掌握这些技巧，让CSS编写更高效、更具响应性。

摘要由CSDN通过智能技术生成

theme: channing-cyan

highlight: a11y-dark

收藏版|70+超全的伪类伪元素集合

伪类和伪元素的概念

1.什么是伪类？

伪类是一种选择器。 mozilla 是这样解释伪类的：

伪类是选择器的一种，它用于选择处于特定状态的元素，比如当它们是这一类型的第一个元素时，或者是当鼠标指针悬浮在元素上面的时候。它们表现得会像是你向你的文档的某个部分应用了一个类一样，帮你在你的标记文本中减少多余的类，让你的代码更灵活、更易于维护。

伪类的语法：单冒号 + 伪类名称，例如下面这样

:first-child

:last-child

2.什么是伪元素？

伪元素和伪类相似，不过表现得是像你往标记文本中加入全新的HTML元素一样，而不是向现有的元素上加入 class 类，伪元素的表现和普通 HTML 元素类似，但他们又不以 html 标签的形式被编写，而是往往以 CSS 的方式编写。

伪元素的语法：双冒号 + 伪元素名称，例如下面这样：

::first-line

::before

注意事项

1.一个选择器中只能使用一个伪元素。伪元素必须紧跟在语句中的简单选择器/基础选择器之后。

2.按照规范，应该使用双冒号(::)而不是单个冒号(:)，以便区分伪类和伪元素。但是，由于旧版本的 W3C 规范并未对此进行特别区分，因此目前绝大多数的浏览器都同时支持使用这两种方式来表示伪元素。单冒号是 CSS2 的语法，双冒号是 CSS3 的语法。

伪元素单双冒号语法在各大浏览器的支持情况：

3.注意事项

伪类会给页面中已经存在的元素添加一个类(class)，伪元素则是添加了一个页面中没有的元素，但请注意这个被添加的元素不会添加到文档树中，只是一种视觉效果。

70+伪类伪元素集合

1.伪类伪元素汇总

tips：共统计到了 60 个伪类。

:active
:checked
:default
:defined
:disabled
:empty
:enabled
:first
:first-child
:first-of-type
:focus
:focus-within
:host
:host()
:hover
:indeterminate
:in-range
:invalid
:lang()
:last-child
:last-of-type
:left
:link
:not()
:nth-child()
:nth-last-of-type()
:nth-of-type()
:only-child
:only-of-type
:optional
:out-of-range
:nth-last-child()
:read-only
:read-write
:required
:right
:root
:scope
:target
:valid
:visited
:where
:any-link 实验性的功能
:blank 实验性的功能
:current 实验性的功能
:dir() 实验性的功能
:drop 实验性的功能
:fullscreen 实验性的功能
:future 实验性的功能
:focus-visible 实验性的功能
:has() 实验性的功能
:host-context() 实验性的功能
:is() 实验性的功能
:local-link 实验性的功能
:nth-col() 实验性的功能
:nth-last-col() 实验性的功能
:past 实验性的功能
:placeholder-shown 实验性的功能
:target-within 实验性的功能
:user-invalid 实验性的功能

tips：共统计到了 12 个伪元素。

::after (:after)
::before (:before)
::cue (:cue)
::first-letter (:first-letter)
::first-line (:first-line)
::selection
::slotted()
::spelling-error
::grammar-error 实验性的功能
::marker 实验性的功能
::placeholder 实验性的功能
::backdrop 实验性的功能

2.常见的伪类应用举例

① :hover

通常用于鼠标悬浮事件开启后要做的事，例如鼠标悬浮时，被鼠标悬浮的某个按钮啊，元素啊变色，或者自动展开菜单，又或者弹出一段提示文字。总之是最常用的伪类之一了。

下面是一则来自 Mozilla 的关于 :hover 的解释：

:hover CSS伪类，适用于用户使用指示设备虚指一个元素(没有激活它)的情况。这个样式会被任何与链接相关的伪类重写，像:link, :visited, 和 :active等。为了确保生效，:hover规则需要放在:link和:visited规则之后，但是在:active规则之前，按照 LVHA 的循顺序声明:link－:visited－:hover－:active。

tips：在触摸屏上 :hover 有问题，基本不可用。不同的浏览器上:hover 伪类表现不同

下面是用法示例：

```css div.menu-bar ul ul { display: none; }

div.menu-bar li:hover > ul { display: block; }

:hover { cursor: pointer; }

.menu-btn:not([disabled]):hover { background-color: #1e87f0; } ```

② :active

:active 伪类匹配被用户激活的元素。它让页面能在浏览器监测到激活时给出反馈。当用鼠标交互时，它代表的是用户按下按键和松开按键之间的时间。

下面是一个来自 Mozilla 的激活链接的例子：

```html

This paragraph contains a link: This link will turn red while you click on it. The paragraph will get a gray background while you click on it or the link.

```

```css a:link { color: blue; } /* 未访问链接 / a:visited { color: purple; } / 已访问链接 / a:hover { background: yellow; } / 用户鼠标悬停 / a:active { color: red; } / 激活链接 */

p:active { background: #eee; } /* 激活段落 */ ```

效果图：

③ :last-child

:last-child，CSS 伪类，代表父元素的最后一个子元素。

这个我用得也比较多，通常是用于去除最后一个元素的边框，或处理循环生成的同类元素的最后一个元素样式。

去除循环生成的 li 中最后一个的边框(底边)的用法示例：

css li:last-child { border-bottom: none; }

④ :first-child

:first-child，CSS 伪类，表示在一组兄弟元素中的第一个元素。

用法和应用场景与 :last-child 类似。不同的是一个是首一个是尾。

⑤ :not()

CSS 伪类 :not()，用来匹配不符合一组选择器的元素。由于它的作用是防止特定的元素被选中，它也被称为反选伪类

下面是用法举例：

``css /* 类名不是.fancy` 的

元素 */ p:not(.fancy) { color: green; }

/* 非

元素 */ body :not(p) { text-decoration: underline; }

/* 既不是

也不是的元素 */ body :not(div):not(span) { font-weight: bold; }

/* 类名不是 .crazy 或 .fancy 的元素 / / 注意，此语法尚未获广泛支持。 */ body :not(.crazy, .fancy) { font-family: sans-serif; } ```

⑥ :required

:required CSS 伪类表示任意设置了required属性的，

, 或

用法如下：

css input:required { border-color: #800000; border-width: 3px; }

⑦ :focus

CSS伪类 :focus，表示获得焦点的元素(如表单输入)。当用户点击或触摸元素或通过键盘的 “tab” 键选择它时会被触发。

下面是一个用法例子：

html <input class="red-input" value="I'll be red when focused."><br> <input class="blue-input" value="I'll be blue when focused.">

```css .red-input:focus { background: yellow; color: red; }

.blue-input:focus { background: yellow; color: blue; } ```

下面是效果图：

⑧ :nth-child()

:nth-child(an+b) 这个 CSS 伪类首先找到所有当前元素的兄弟元素，然后按照位置先后顺序从1开始排序，选择的结果为CSS伪类:nth-child括号中表达式(an+b) 匹配到的元素集合(n=0，1，2，3...)。

这个伪类，有时非常有用，我用它做过的场景是给不同的词汇设置不同的颜色，有点类似词云的场景。这可以结合等比数列，等差数列公式，或其他一些数学表达式使用。

下面是一则 Mozilla 的解释：

0n+3 或简单的 3 匹配第三个元素。
1n+0 或简单的 n 匹配每个元素。(兼容性提醒：在 Android 浏览器 4.3 以下的版本 n 和 1n 的匹配方式不一致。1n 和 1n+0 是一致的，可根据喜好任选其一来使用。)
2n+0 或简单的 2n 匹配位置为 2、4、6、8...的元素(n=0时，2n+0=0，第0个元素不存在，因为是从1开始排序)。你可以使用关键字 even 来替换此表达式。
2n+1 匹配位置为 1、3、5、7...的元素。你可以使用关键字 odd 来替换此表达式。
3n+4 匹配位置为 4、7、10、13...的元素。

a 和 b 都必须为整数，并且元素的第一个子元素的下标为 1。换言之就是，该伪类匹配所有下标在集合 { an + b; n = 0, 1, 2, ...} 中的子元素。另外需要特别注意的是，an 必须写在 b 的前面，不能写成 b+an 的形式。

3. 常见的伪元素应用举例

::after (:after)

::after用来创建一个伪元素，作为已选中元素的最后一个子元素。通常会配合content属性来为该元素添加装饰内容。这个虚拟元素默认是行内元素。例如在一个 div 的后面添加一个小图标“→” 或 “...”：

css div::after { content: "→"; width: 14px; height: 14px; }

下面是一个 Mozilla 上挺有意思的例子：

```html

这是上面代码的实现
我们有一些文字有一些提示。
把鼠标放上去看看。

```

```css span[data-descr] { position: relative; text-decoration: underline; color: #00F; cursor: help; }

span[data-descr]:hover::after { content: attr(data-descr); position: absolute; left: 0; top: 24px; min-width: 200px; border: 1px #aaaaaa solid; border-radius: 10px; background-color: #ffffcc; padding: 12px; color: #000000; font-size: 14px; z-index: 1; } ```

该例子的效果图：