CSS基础之伪类和伪元素
伪类
伪类是特殊的选择器，用于选择特定状态的元素。例如：鼠标悬停在元素上、第一个元素等。它表现的就像是向HTML元素添加了一个类一样。可以帮你减少在HTML中显示指定类，使代码更灵活，更好维护。
列表（部分）
位置相关
| 伪类 | 介绍 |
|---|---|
:root |
匹配文档树根元素，对于HTML来说就是，相比于html选择器它的优先级更高。 |
:first-child |
表示一组兄弟元素的第一个元素。 |
:first-of-type |
同一组类型元素的第一个 |
:last-child |
表示一组兄弟元素的最后一个元素。 |
:last-of-type |
同一组类型元素的最后一个 |
:only-child |
匹配没有任何兄弟元素的元素。等效的选择器还可以写成 :first-child:last-child或者*:nth-child(1):nth-last-child(1)*，当然前者的权重会低一点。 |
:only-of-type |
代表了任意一个元素，这个元素没有其他相同类型的兄弟元素。 |
:nth-child() |
首先找到所有当前元素的兄弟元素, 用 n 来筛选出在当前元素的兄弟元素节点的位置。 |
:nth-last-child() |
与:nth-child()一样，只是它是从后往前计数。 |
:nth-of-type() |
针对具有一组兄弟节点的标签, 用 n 来筛选出在一组兄弟节点的位置。 |
:nth-last-of-type() |
与nth-of-type一样，只是它是从后往前计数。 |
表单相关
| 伪类 | 介绍 |
|---|---|
:autofill |
当input元素值被浏览器自动填充时，会匹配，用户编辑字段，则停止匹配。 |
:default |
匹配表单中默认选中的元素。 |
:invalid |
验证失败的input、fieldset或其它form元素。 |
:valid |
验证成功的input、fieldset或其它form元素。 |
:disabled |
禁用的元素。 |
:enabled |
启用的元素。 |
:empty |
表示没有子元素的元素，子元素可以是元素、也可以是文本（包括空格）。注释、处理指令和CSS内容不会影响元素是否为空。 |
:required |
设置了required属性的input、select、textarea元素。 |
:optional |
表示没有required属性的、 |