CSS引入伪类和伪元素概念是为了格式化文档树以外的信息. 也就是说, 伪类和伪元素是用来修饰不再文档树中的部分, 比如一句话中的第一个字母或者列表中的第一个元素
伪类
伪类用于当已有元素处于某个状态时, 为其添加对应的样式, 这个状态是根据用户行为而动态变化的. 比如说, 当用户悬停在指定的元素时, 我们可以通过:hover
来描述这个元素的状态. 虽然它和普通的CSS类相似, 可以为已有的元素添加样式, 但它只处在DOM树处于无法描述的状态下才能为元素添加样式, 所以将其称为伪类
状态性伪类
基于元素当前状态进行选择. 在与用户的交互过程中元素的状态是动态变化的, 因此该元素会根据其状态呈现不同的样式. 当元素处于某状态时会呈现该样式, 而进入另一状态后, 该样式也会失去
:link
应用于未被访问过的链接:hover
应用于鼠标悬停到的元素:active
应用于被激活的元素:visited
应用于被访问过的链接, 与:link
互斥:focus
应用于拥有键盘输入焦点的元素
结构性伪类
CSS3新增选择器, 利用DOM树进行元素过渡, 通过文档结构的互相关系来匹配元素, 能够减少class
和id
属性的定义, 使文档结构更简洁
:first-child
选择属于其父元素的第一个子元素:last-child
选择属于其父元素的最后一个子元素nth-child(n)
选择属于其父元素的第n个子元素:nth-last-child(n)
选择属于其父元素的倒数第n个子元素nth-of-type(n)
选择属于其父元素的每组兄弟节点的第n个元素:nth-last-of-type(n)
选择属于其父元素的每组兄弟节点的倒数第n个元素:first-of-type
选择属于其父元素的首个元素:last-of-tyep
选择属于其父元素的倒数第一个元素:only-child
选择没有任何兄弟元素的元素:only-of-type
选择了任意一个没有其他相同类型的兄弟元素:empty
选择的没有子元素的元素:checked
匹配被选中的input
元素, 这个input
元素包括radio
和checkbox
:default
匹配一组相关元素中的默认表单元素:disabled
匹配禁用的表单元素:enabled
匹配没有设置disable
属性的表单元素:valid
匹配内容验证正确的表单元素
伪元素
用于创建一些不在文档树中的元素, 并为其添加样式. 实际上, 伪元素就是选取某些元素前面或后面这种普通选择器无法完成的工作. 控制的内容和元素是相同的, 但它本事是基于元素的抽象, 并不存在于文档结构中. 比如说, 我们可以通过::before
来在一个元素前增加一些文本, 并为这些文本添加样式
CSS3规范中要求使用冒号:
用于CSS3伪类, 双冒号::
用于CSS3伪元素, 目的是区分伪类和伪元素
::first-letter
选择元素文本的第一个字::first-line
选择元素文本的第一行::before
在元素内容的最前面添加新内容::after
在元素内容的最后面添加新内容::selection
匹配被用户选中或者处于高亮状态的部分::placeholder
匹配占位符的文本, 只有元素设置了placeholder
属性时, 该伪元素才能生效