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

灵扁扁
2,772 阅读10分钟

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

伪类和伪元素的概念

1.什么是伪类？

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

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

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

:first-child

:last-child

2.什么是伪元素？

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

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

::first-line

::before

注意事项

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

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

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

image.png

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 伪类表现不同

下面是用法示例：

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 的激活链接的例子：

<p>This paragraph contains a link:
  <a href="#">This link will turn red while you click on it.</a>
  The paragraph will get a gray background while you click on it or the link.
</p>

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

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

效果图：

image.png

③ :last-child

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

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

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

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

④ :first-child

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

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

⑤ :not()

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

下面是用法举例：

/* 类名不是 `.fancy` 的 <p> 元素 */
p:not(.fancy) {
  color: green;
}

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

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

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

⑥ :required

:required CSS 伪类 表示任意设置了required属性的，, 或 元素。 这个伪类对于高亮显示在提交表单之前必须具有有效数据的字段非常有用。

用法如下：

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

⑦ :focus

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

下面是一个用法例子：

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

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

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

下面是效果图：

image.png

⑧ :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 的后面添加一个小图标“→” 或 “...”：

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

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

<p>这是上面代码的实现<br />
  我们有一些 <span data-descr="collection of words and punctuation">文字</span> 有一些
  <span data-descr="small popups which also hide again">提示</span>。<br />
  把鼠标放上去<span data-descr="not to be taken literally">看看</span>。
</p>

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;
}

该例子的效果图：

image.png

tips：这个例子，巧妙的利用了以下知识点：

① data-属性名，html 的自定义元素属性语法

② 伪类和伪元素的结合使用

③ attr(attribute-name)，函数返回选择元素的属性值，这个也常被用于动态悬浮提示。

  • ::backdrop 实验中的功能

::backdrop CSS 伪元素 是在任何处于全屏模式的元素下的即刻渲染的盒子。 但请注意这是一个实验中功能，需注意浏览器的支持情况。

下个面是一个改变视频全屏背景色的例子和效果图

<video autoplay controls width="100%" height="500" id="videoElement"></video>

video::backdrop {
  background-color: rgba(255, 0, 0, 0.44);
}

image.png

  • ::before (:before)

与 ::after 类似，只不过是一个在前一个在后。CSS中，::before 创建一个伪元素， 其将成为匹配选中的元素的第一个子元素。常通过 content 属性来为一个元素添加修饰性的内容。 此元素默认为行内元素。

下面是一些语法示例

/* CSS3 语法 */
element::before { }

/* （单冒号）CSS2 过时语法 */
element:before  { }

/* 在每一个p元素前插入内容 */
p::before { content: "Hello world!"; }
  • ::cue (:cue)

:: cue CSS伪元素匹配所选元素中的WebVTT提示。这可以用于在VTT轨道的媒体中使用字幕和其他线索。

只有CSS一小部分属性可以与 :: cue 伪元素一起使用： color，opacity，visibility，text-decoration，text-shadow，background，width 等

  • ::first-letter (:first-letter)

::first-letter会选中某 block-level element（块级元素）第一行的第一个字母， 并且文字所处的行之前没有其他内容（如图片和内联的表格） 。 下面是一个例子

/* 使每段开头的第一个字母变红变大 */

p::first-letter {  /* 使用:first来兼容IE8- */
  color: red;
  font-size: 130%;
}
  • ::first-line (:first-line)

在某 block-level element （块级元素）的第一行应用样式。 该伪元素只能用于块级元素或行内块元素（inline-block）

下面是一个将每一个 p 标签中的第一行英文字符转换为大写的例子：

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore.</p>

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

效果图：

image.png

伪类和伪元素的区别

1.css3 以后，为了区分伪类和为元素，规范伪类使用单冒号，伪元素使用双冒号表示。 （但css2 的伪元素单冒号的写法，仍被许多现代浏览器兼容支持）

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

avatar
文章
阅读
粉丝