From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/zh-cn/web/css/pseudo-classes/index.html | 173 ++++++++++++++++++++++++++ 1 file changed, 173 insertions(+) create mode 100644 files/zh-cn/web/css/pseudo-classes/index.html (limited to 'files/zh-cn/web/css/pseudo-classes/index.html') diff --git a/files/zh-cn/web/css/pseudo-classes/index.html b/files/zh-cn/web/css/pseudo-classes/index.html new file mode 100644 index 0000000000..2f76adbd08 --- /dev/null +++ b/files/zh-cn/web/css/pseudo-classes/index.html @@ -0,0 +1,173 @@ +--- +title: 伪类 +slug: Web/CSS/Pseudo-classes +tags: + - CSS + - CSS 参考 + - 进阶 + - 选择器 +translation_of: Web/CSS/Pseudo-classes +--- +
{{CSSRef}}
+ +

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

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

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

+ +
+

注意： 与伪类相反，{{cssxref("pseudo-elements")}} 可被用于为一个元素的 特定部分 应用样式。

+
+ +

语法

+ +
selector:pseudo-class {
+  property: value;
+}
+ +

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

+ +

标准伪类索引

+ +
+ +
+ +

规范

+ + + + + + + + + + + + + + +
规范状态备注
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
{{SpecName("Fullscreen")}}{{Spec2("Fullscreen")}}Defined :fullscreen.
{{SpecName("HTML WHATWG", "#pseudo-classes")}}{{Spec2("HTML WHATWG")}}Defines when particular selectors match HTML elements.
{{SpecName("CSS4 Selectors")}}{{Spec2("CSS4 Selectors")}}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 {{CSSxRef(":-moz-only-whitespace")}} {{Non-standard_Inline}}.
+ No significant change for other pseudo-classes defined in {{SpecName("CSS3 Selectors")}} and {{SpecName("HTML5 W3C")}} (though semantic meaning not taken over).
{{SpecName("HTML5 W3C")}}{{Spec2("HTML5 W3C")}}Copies the relevant section from the canonical (WHATWG) HTML spec.
{{SpecName("CSS3 Basic UI")}}{{Spec2("CSS3 Basic UI")}}Defined :default, :valid, :invalid, :in-range, :out-of-range, :required, :optional, :read-only and :read-write, but without the associated semantic meaning.
{{SpecName("CSS3 Selectors")}}{{Spec2("CSS3 Selectors")}}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 {{SpecName('CSS2.1')}}.
{{SpecName("CSS2.1")}}{{Spec2("CSS2.1")}}Defined :lang(), :first-child, :hover, and :focus.
+ No significant change for pseudo-classes defined in {{SpecName('CSS1')}}.
{{SpecName("CSS1")}}{{Spec2("CSS1")}}Defined :link, :visited and :active, but without the associated semantic meaning.
+
+ +

参见

+ + -- cgit v1.2.3-54-g00ecf