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_lang/index.html | 99 ++++++++++++++++++++++++++++++ 1 file changed, 99 insertions(+) create mode 100644 files/zh-cn/web/css/_colon_lang/index.html (limited to 'files/zh-cn/web/css/_colon_lang/index.html') diff --git a/files/zh-cn/web/css/_colon_lang/index.html b/files/zh-cn/web/css/_colon_lang/index.html new file mode 100644 index 0000000000..1249bad603 --- /dev/null +++ b/files/zh-cn/web/css/_colon_lang/index.html @@ -0,0 +1,99 @@ +--- +title: ':lang' +slug: 'Web/CSS/:lang' +translation_of: 'Web/CSS/:lang' +--- +

 

+ +
{{CSSRef}}
+ +

:lang() CSS 伪类基于元素语言来匹配页面元素。

+ +
/* 选取任意的英文（en)段落 */
+p:lang(en) {
+  quotes: '\201C' '\201D' '\2018' '\2019';
+}
+ +
+

注意: 在HTML中, 语言是通过{{htmlattrxref("lang")}} 属性,和 {{HTMLElement("meta")}} 元素的组合来决定的, 也可能是通过协议的信息来确定（例如HTTP头）. 对于其他文档类型，也可能存在其他用于确定语言的方法。

+
+ +

语法

+ +

正式语法

+ +
:lang( <language-code> )
+ +

参数

+ +
+
<language-code>
+
 {{cssxref("<string>")}} 代表了你想定位的语言. 可接受的值为在HTML 规范中指定的值.
+
+ +

Example

+ +

在这个例子中, :lang() 伪类使用子选择器来匹配引用元素({{htmlElement("q")}})的父元素. 需要注意的是，此处演示的方法并不是唯一的，最好的方法需要依据文档类型来确定。还需要注意的是， {{glossary("Unicode")}} 值用于指定一些特殊字符的引用.

+ +

HTML

+ +
<div lang="en"><q>This English quote has a <q>nested</q> quote inside.</q></div>
+<div lang="fr"><q>This French quote has a <q>nested</q> quote inside.</q></div>
+<div lang="de"><q>This German quote has a <q>nested</q> quote inside.</q></div>
+
+ +

CSS

+ +
:lang(en) > q { quotes: '\201C' '\201D' '\2018' '\2019'; }
+:lang(fr) > q { quotes: '« ' ' »'; }
+:lang(de) > q { quotes: '»' '«' '\2039' '\203A'; }
+
+ +

Result

+ +

{{EmbedLiveSample('Example', 350)}}

+ +

规范

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
规范状态Comment
{{ SpecName('CSS4 Selectors', '#lang-pseudo', ':lang()') }}{{ Spec2('CSS4 Selectors') }}无变化.
{{ SpecName('CSS3 Selectors', '#lang-pseudo', ':lang()') }}{{ Spec2('CSS3 Selectors') }}没有明显的变化.
{{ SpecName('CSS2.1', 'selector.html#lang', ':lang()') }}{{ Spec2('CSS2.1') }}最初的定义。
+ +

浏览器兼容性

+ +
+ + +

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

+
+ +

参考

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