CSS伪类与伪元素

467 阅读3分钟

CSS引入伪类和伪元素概念是为了格式化文档树以外的信息. 也就是说, 伪类和伪元素是用来修饰不再文档树中的部分, 比如一句话中的第一个字母或者列表中的第一个元素

伪类

伪类用于当已有元素处于某个状态时, 为其添加对应的样式, 这个状态是根据用户行为而动态变化的. 比如说, 当用户悬停在指定的元素时, 我们可以通过:hover来描述这个元素的状态. 虽然它和普通的CSS类相似, 可以为已有的元素添加样式, 但它只处在DOM树处于无法描述的状态下才能为元素添加样式, 所以将其称为伪类

状态性伪类

基于元素当前状态进行选择. 在与用户的交互过程中元素的状态是动态变化的, 因此该元素会根据其状态呈现不同的样式. 当元素处于某状态时会呈现该样式, 而进入另一状态后, 该样式也会失去

  • :link应用于未被访问过的链接
  • :hover应用于鼠标悬停到的元素
  • :active应用于被激活的元素
  • :visited应用于被访问过的链接, 与:link互斥
  • :focus应用于拥有键盘输入焦点的元素

结构性伪类

CSS3新增选择器, 利用DOM树进行元素过渡, 通过文档结构的互相关系来匹配元素, 能够减少classid属性的定义, 使文档结构更简洁

  • :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元素包括radiocheckbox
  • :default匹配一组相关元素中的默认表单元素
  • :disabled匹配禁用的表单元素
  • :enabled匹配没有设置disable属性的表单元素
  • :valid匹配内容验证正确的表单元素

伪元素

用于创建一些不在文档树中的元素, 并为其添加样式. 实际上, 伪元素就是选取某些元素前面或后面这种普通选择器无法完成的工作. 控制的内容和元素是相同的, 但它本事是基于元素的抽象, 并不存在于文档结构中. 比如说, 我们可以通过::before来在一个元素前增加一些文本, 并为这些文本添加样式

CSS3规范中要求使用冒号:用于CSS3伪类, 双冒号::用于CSS3伪元素, 目的是区分伪类和伪元素

  • ::first-letter选择元素文本的第一个字
  • ::first-line选择元素文本的第一行
  • ::before在元素内容的最前面添加新内容
  • ::after在元素内容的最后面添加新内容
  • ::selection匹配被用户选中或者处于高亮状态的部分
  • ::placeholder匹配占位符的文本, 只有元素设置了placeholder属性时, 该伪元素才能生效