在线文档教程
CSS

伪类 | Pseudo-classes

Pseudo-classes

一个CSS 伪类是一个添加到选择器的关键字,它指定所选元素的特殊状态。例如,当用户悬停在上面时,:hover可以用来改变按钮的颜色。

div:hover { background-color: #F89B4D; }

伪类允许您不仅通过与文档树的内容相关,而且还能通过与外部因素如导航器的历史记录(例如:visited),内容的状态(如:checkedon某些表单元素)或鼠标的位置(例如:hover,可让您知道鼠标是否位于元素上方)来将样式应用于元素上。

注意:与伪类相比,pseudo-elements可以用来设置元素的特定部分

语法

selector:pseudo-class { property: value; }

像常规类一样,您可以在选择器中链接尽可能多的伪类。

标准伪类的索引

  • :active

  • :any

  • :checked

  • :default

  • :dir()

  • :disabled

  • :empty

  • :enabled

  • :first

  • :first-child

  • :first-of-type

  • :fullscreen

  • :focus

  • :hover

  • :indeterminate

  • :in-range

  • :invalid

  • :lang()

  • :last-child

  • :last-of-type

  • :left

  • :link

  • :not()

  • :nth-child()

  • :nth-last-child()

  • :nth-last-of-type()

  • :nth-of-type()

  • :only-child

  • :only-of-type

  • :optional

  • :out-of-range

  • :read-only

  • :read-write

  • :required

  • :right

  • :root

  • :scope

  • :target

  • :valid

  • :visited

规范

SpecificationStatusComment
Fullscreen APILiving StandardDefined :fullscreen.
HTML Living StandardLiving StandardNo change from HTML5.
Selectors Level 4Working DraftDefined :any-link, :local-link, :scope, :active-drop-target, :valid-drop-target, :invalid-drop-target, :current, :past, :future, :placeholder-shown, :user-error, :blank, :nth-match(), :nth-last-match(), :nth-column(), :nth-last-column(), and :matches(). No significant change for pseudo-classes defined in Selectors Level 3 and HTML5 (though semantic meaning not taken over).
HTML5RecommendationDefined the semantic meaning, in the HTML context, of :link, :visited, :active, :enabled, :disabled, :checked, and :indeterminate. Defined :default, :valid, :invalid, :in-range, :out-of-range, :required, :optional, :read-only, :read-write, and :dir().
CSS Basic User Interface Module Level 3Candidate RecommendationDefined :default, :valid, :invalid, :in-range, :out-of-range, :required, :optional, :read-only, and :read-write, but without the associated semantic meaning.
Selectors Level 3RecommendationDefined :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)RecommendationDefined :lang(), :first-child, :hover, and :focus. No significant change for pseudo-classes defined in CSS Level 1.
CSS Level 1RecommendationDefined :link, :visited, and :active, but without the associated semantic meaning.