伪类与伪元素

185 阅读1分钟

一、伪类

CSS 伪类是添加到选择器的关键字,指定要选择的元素的特殊状态。

:hover 可被用于在用户将鼠标悬停在按钮上时改变按钮的颜色:

button:hover {
  color: blue;
}

类似于普通的类,你可以在一个选择器中同时一起写多个伪类。

标准伪类索引

二、伪元素

伪元素是一个附加至选择器末的关键词,允许你对被选择元素的特定部分修改样式。

::first-line 伪元素可改变段落首行文字的样式:

p::first-line {
  color: blue;
}

标准伪元素索引

三、通过双冒号(::)和单个冒号(:)区分伪类和伪元素

伪元素使用双冒号(::),而伪类使用单个冒号(:),但由于旧版本的 W3C 规范并未对此进行特别区分,因此目前绝大多数的浏览器都同时支持使用这两种方式来表示伪元素:

  • ::after (:after)

  • ::before (:before)

  • ::first-letter (:first-letter)

  • ::first-line (:first-line)

  • ::cue (:cue)

伪类连同伪元素一起,他们允许你不仅仅是根据文档 DOM 树中的内容对元素应用样式,而且还允许你根据诸如像导航历史这样的外部因素来应用样式(例如 :visited),同样的,可以根据内容的状态(例如在一些表单元素上的 :checked),或者鼠标的位置(例如 :hover 让你知道是否鼠标在一个元素上悬浮)来应用样式。