CSS 中的伪类和伪元素

伪类（Pseudo classes）

由于状态的变化是非静态的，所以元素达到一个特定状态时，它可能得到一个伪类的样式；当状态改变时，它又会失去这个样式。由此可以看出，它的功能和 class 有些类似，但它是基于文档之外的抽象，所以叫伪类。

语法：selector:pseudo-class {}

:root

选择 html 元素，在声明全局 CSS 变量时很有用。

:root {
  --first-color: #488cff;
  --second-color: #ffff8c;
}

#firstParagraph {
  background-color: var(--first-color);
}

#secondParagraph {
  background-color: var(--second-color);
}

:target

若当前页面 URL 为：http://a.cn/index.html#section2，则<section id="section2">Example</section>可以通过 :target 选中。

:first-child

选择作为一组兄弟元素中的第一个元素，与父元素如何无关！

p:first-child 选择 p 元素，要求该元素是一组兄弟元素中的第一个元素（即 p 元素前面没有兄弟元素）。

p > i:first-child 选择 i 元素，要求：① 该 i 元素的父元素是 p 元素。② 该 i 元素是一组兄弟元素中的第一个元素。

p:first-child i 选择 i 元素，要求：① 该 i 元素的父元素是 p 元素。② 该 p 元素是一组兄弟元素中的第一个元素

:first-of-type

选择第一次出现的元素，相比于 :first-child，不要求没有前兄弟节点。

• p:first-of-type 选择 p 元素，要求该元素是某层级中第一次出现的 p 元素（与p 元素前面有没有兄弟元素无关）。

:last-child 和 :last-of-type

:first-child 和 :first-of-type 的区别在于是否有 前兄弟元素，:last-child 和 :last-of-type 的区别在于是否有 后兄弟元素。

• p:last-child 选择 p 元素，要求该元素是一组兄弟元素的最后一个元素。
• p:last-of-type 选择 p 元素，要求该元素是一组元素中最后一次出现的 p 元素，与该 p 元素后面是否还有兄弟元素无关。

:nth-child(an+b)

先找到一组兄弟元素，然后从 1 开始排序，选择符参数次序要求的元素。a、b 必须是整数。

• div:nth-child(0n+1) 匹配一组兄弟元素中的第一个元素，且该元素是 div 元素。等同 div:nth-child(1) div:first-child。
• tr:nth-child(odd) 匹配表格中的奇数行，等同 tr:nth-child(2n+1)
• tr:nth-child(even) 匹配表格中的偶数行，等同 tr:nth-child(2n+0)
• span:nth-child(-n+3) 匹配前三个子元素中的 span 元素
• .a span:nth-child(2n+1) 匹配 span 元素，要求：① 父元素的类为 a。② 该 span 元素在所在组兄弟元素中，次序为奇数

:nth-child() 与 :nth-last-child() 相反。

:nth-of-type(an+b)

针对具有一组兄弟节点的标签, 用参数来筛选出在一组兄弟节点的位置。

/* 奇数段 */
p:nth-of-type(2n+1) {
  color: red;
}

<div>
  <p>这是第一段。</p><!-- 被选择 -->
  <div>这段不参与计数。</div>
  <p>这是第二段。</p>
  <p>这是第三段。</p><!-- 被选择 -->
</div>

:nth-of-type() 与 :nth-last-of-type() 相反。

其他伪类

• a:link 未访问的链接
• a:visited 已访问的链
• a:hover 鼠标划过链接
• a:active 已选中的链接
• :checked 选择选中状态下的 radio 元素、checkbox 元素或 select 的 option
• :disabled 选择被禁用的元素
• :enabled 选择被启用的元素
• div:focus 当 div 元素获得焦点时将被选中
• div:focus-within 即使是 div 的子元素——而不是 div 自身获得焦点，也能被选中
• p:not(.fancy) 选择类名不是 fancy 的 p 元素
• :empty 选择元素内无任何子元素、文本、空格的元素
• :only-child 匹配没有兄弟元素的元素，等同 :first-child:last-child 或 nth-child(1):nth-last-child(1)
• main :only-of-type 选择 main 元素下只出现一次的元素
• :valid 和 invalid 分别选择通过验证、未通过验证的表单元素

伪元素（Pseudo elements）

CSS伪元素控制的内容和元素是没有差别的，但是它本身只是基于元素的抽象，并不存在于文档中，所以称为伪元素。

语法：selector::pseudo-element {}。伪元素通常用两个冒号 ::，以便与伪类区别。

伪元素可以和伪类一起使用。

::before 和 ::after

创建一个伪元素，其将成为匹配选中的元素的第一个/最后一个子元素。常通过 content 属性来为一个元素添加修饰性的内容。此元素默认为行内元素。

content 仅能用于 ::before 和 ::after 中，值有以下几种：

div::before {
    content: none;
    content: normal;
    content: 'some text';
    content: url(pic.jpg);
    content: attr();
}

当值为 none 或 normal 时，伪元素无效；若想使用伪元素但又不想添加字符或图片，可以 content: ''

::first-letter

选中块级元素第一行的第一个字。允许设置的属性：与文字相关的属性、背景、边框、内边框、外边框。

::first-line

选中块级元素的第一行。允许设置的属性：与文字相关的属性、背景。

::selection

选中被用户选中的文字。允许设置的属性：color、background-color、cursor、caret-color、outline、text-decoration、text-emphasis-color、text-shadow。

参考资料

• MDN 伪类参考链接
• MDN 伪元素参考链接
• MDN content参考链接