主题
树结构伪类
:root
匹配文档根元素，在 html 中可以理解为就是 <html> 元素
1. 与 html 元素的区别
- 选择器权重比 html 选择器要高
- 约定俗成，html 选择器负责样式，:root 伪类负责 CSS 变量
:first-child 和 :last-child
:first-child 匹配第一个子元素
:last-child 匹配最后一个子元素
html
<ol>
<li>内容</li>
<li>内容</li>
<li>内容</li>
</ol>css
ol > :first-child { color: pink; }
ol > :last-child { color: skyblue; }
:only-child
匹配没有任何兄弟元素的元素
html
<div>
<!-- 可以匹配 -->
<p></p>
</div>html
<div>
<!-- 可以匹配，后面文本没有标签嵌套，是匿名文本，所以不影响 -->
<p></p>删除
</div>:nth-child 和 :nth-last-child
找到所有当前元素的兄弟元素，在其中匹配所有制定索引的元素
1. 从 1 开始排序
2. 奇偶
- odd：匹配第奇数个元素，1、3、5...
- even：匹配第偶数个元素，2、4、6...
- 可以这么记忆：odd 是 3 个字母，所以匹配奇数；even 是 4 个字母，所以匹配偶数
3. An+B
- n 可以理解为从 1 开始的自然序列（1，2，3，4...）
:nth-child(5n)：匹配倍数为 5 的元素，5、10、15...:nth-child(3n+4)：匹配第4、7、10... 个元素:nth-child(n+2):nth-child(-n+6)：匹配 [2, 6] 的元素
:first-of-type 和 :last-of-type
匹配所有当前元素的同标签类型的兄弟元素，中的第一个（最后一个）元素
html
<div>
<h4>标题</h4>
<p>文本</p>
<p>文本</p>
<p>文本</p>
</div>css
div p:first-of-type { color: pink; }
div p:last-of-type { color: skyblue; }
:only-of-type
示匹配唯一的标签类型的元素
:nth-of-type 和 :nth-last-of-type
找到所有当前元素的相同标签类型的兄弟元素，在其中匹配所有制定索引的元素