伪类

CSS 伪类 是添加到选择器的关键字,指定要选择的元素的特殊状态。例如,:hover 可被用于在用户将鼠标悬停在按钮上时改变按钮的颜色。

/* 所有用户指针悬停的按钮 */
button:hover {
  color: blue;
}

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

注意: 与伪类相反,pseudo-elements 可被用于为一个元素的 特定部分 应用样式。

语法

selector:pseudo-class {
  property: value;
}

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

标准伪类索引

规范

规范 状态 备注
Fullscreen API Living Standard Defined :fullscreen.
HTML Living Standard Living Standard Defines when particular selectors match HTML elements.
Selectors Level 4 Working Draft Defined :any-link:blank:local-link:scope:drop:current:past:future:placeholder-shown:user-invalid:nth-col():nth-last-col():is() and :where().
Changed :empty to behave like :-moz-only-whitespace  .
No significant change for other pseudo-classes defined in Selectors Level 3 and HTML5 (though semantic meaning not taken over).
HTML5 Recommendation Copies the relevant section from the canonical (WHATWG) HTML spec.
CSS Basic User Interface Module Level 3 Recommendation Defined :default:valid:invalid:in-range:out-of-range:required:optional:read-only and :read-write, but without the associated semantic meaning.
Selectors Level 3 Recommendation Defined :target:root:nth-child():nth-last-of-child():nth-of-type():nth-last-of-type():last-child:first-of-type:last-of-type:only-child:only-of-type:empty and :not().
Defined the syntax of :enabled:disabled:checked, and :indeterminate, but without the associated semantic meaning.
No significant change for pseudo-classes defined in CSS Level 2 (Revision 1).
CSS Level 2 (Revision 1) Recommendation Defined :lang():first-child:hover, and :focus.
No significant change for pseudo-classes defined in CSS Level 1.
CSS Level 1 Recommendation Defined :link:visited and :active, but without the associated semantic meaning.

参见