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/_colon_focus/index.html | 96 +++++++++++++++++++++++++++++ 1 file changed, 96 insertions(+) create mode 100644 files/zh-cn/web/css/_colon_focus/index.html (limited to 'files/zh-cn/web/css/_colon_focus') diff --git a/files/zh-cn/web/css/_colon_focus/index.html b/files/zh-cn/web/css/_colon_focus/index.html new file mode 100644 index 0000000000..fe3ae14c56 --- /dev/null +++ b/files/zh-cn/web/css/_colon_focus/index.html @@ -0,0 +1,96 @@ +--- +title: ':focus' +slug: 'Web/CSS/:focus' +tags: + - CSS + - Layout + - Reference + - Web + - 伪类 +translation_of: 'Web/CSS/:focus' +--- +

{{CSSRef}}

+ +

CSS伪类 :focus表示获得焦点的元素(如表单输入)。当用户点击或触摸元素或通过键盘的 “tab” 键选择它时会被触发。

+ +
/* Selects any <input> when focused */
+input:focus {
+  color: red;
+}
+ +
+

提示:此伪类仅适用于焦点元素本身。如果要选择包含焦点元素的元素,请使用{{cssxref(":focus-within")}} 。

+
+ +

语法

+ +
{{csssyntax}}
+ +

Example

+ +

HTML

+ +
<input class="red-input" value="I'll be red when focused."><br>
+<input class="blue-input" value="I'll be blue when focused.">
+ +

CSS

+ +
.red-input:focus {
+  background: yellow;
+  color: red;
+}
+
+.blue-input:focus {
+  background: yellow;
+  color: blue;
+}
+ +

结果

+ +

{{EmbedLiveSample('Example')}}

+ +

规范

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', 'scripting.html#selector-focus', ':focus')}}{{Spec2('HTML WHATWG')}}Defines HTML-specific semantics.
{{SpecName('CSS4 Selectors', '#focus-pseudo', ':focus')}}{{Spec2('CSS4 Selectors')}}No change.
{{SpecName('CSS3 Selectors', '#the-user-action-pseudo-classes-hover-act', ':focus')}}{{Spec2('CSS3 Selectors')}}No change.
{{SpecName('CSS2.1', 'selector.html#dynamic-pseudo-classes', ':focus')}}{{Spec2('CSS2.1')}}Initial definition.
+ +

浏览器兼容性

+ +

{{Compat("css.selectors.focus")}}

+ +
 
+ +

参考

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