From 218934fa2ed1c702a6d3923d2aa2cc6b43c48684 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:43:23 -0500 Subject: initial commit --- files/zh-tw/web/css/_colon_lang/index.html | 98 ++++++++++++++++++++++++++++++ 1 file changed, 98 insertions(+) create mode 100644 files/zh-tw/web/css/_colon_lang/index.html (limited to 'files/zh-tw/web/css/_colon_lang') diff --git a/files/zh-tw/web/css/_colon_lang/index.html b/files/zh-tw/web/css/_colon_lang/index.html new file mode 100644 index 0000000000..f79d142f09 --- /dev/null +++ b/files/zh-tw/web/css/_colon_lang/index.html @@ -0,0 +1,98 @@ +--- +title: ':lang()' +slug: 'Web/CSS/:lang' +translation_of: 'Web/CSS/:lang' +--- +
{{CSSRef}}
+ +

:lang() 是一種 CSS 偽類 ( pseudo-class )。它會根據括號中指定的語系，來選擇使用的元素。

+ +
/* 選取任何語言屬性為英文 (en) 的 <p> */
+p:lang(en) {
+  quotes: '\201C' '\201D' '\2018' '\2019';
+}
+ +
+

注意： 在 HTML 中，語言是通過 {{htmlattrxref("lang")}} 屬性和 {{HTMLElement("meta")}} 元素的組合來決定的, 也可能是通過協議的信息來確定 (例如 HTTP 表頭). 對於其他文檔類型，也可能存在其他用於確定語言的方法。

+
+ +

語法 Syntax

+ +

語法格式 Formal syntax

+ +
{{csssyntax}}
+ +

參數 Parameter

+ +
+
<language-code>
+
{{cssxref("<string>")}} 代表你要指定的語言。可接受的值為 HTML 規範中指定的值。
+
+ +

範例 Example

+ +

在此例中，:lang() 偽類 會依據 “引用元素 quote” ({{htmlElement("q")}}) 的父層來選擇 子組合子 ( child combinators )。 請注意，此處演示的方法並不是唯一的，並且最好的方式，是依據文檔類型來確定。還要注意的是， {{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)}}

+ +

技術規格 Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
規格 Specification狀態 Status註 Comment
{{SpecName('CSS4 Selectors', '#lang-pseudo', ':lang()')}}{{Spec2('CSS4 Selectors')}}Adds wildcard language matching and comma-separated list of languages.
+ 添加萬用字符語言匹配，且逗號分隔語言列表。
{{SpecName('CSS3 Selectors', '#lang-pseudo', ':lang()')}}{{Spec2('CSS3 Selectors')}}沒有重大變化。
{{SpecName('CSS2.1', 'selector.html#lang', ':lang()')}}{{Spec2('CSS2.1')}}初步定義。
+ +

瀏覽器兼容性 Browser compatibility

+ +
+ + +

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

+
+ +

其他參考 See also

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