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。
