:lang()

:LANG()

此為 準類別 的語言準類別；會檢查元素的屬性 LANG，當語言符合時，會採用此設計的風格。其語法是：

lang(語言標籤) <style type='text/css'> P[lang] {color:white; width:80%; } P:lang(zh) {background:blue; font-size:140%; } P:lang(zh):before {content:'中文：'; background:red; } P:lang(en) {background:green; font-style:italic; } P:lang(en):before {content:'英文：'; background:red; } </style> <p lang='zh'>我很高興在此遇見您。</p> <p lang='en'>I am very glad to meet you here。</p>

• IE6 無此項；IE8, Firefox3.0, Safari, Chrome 都成功。

用 :lang() 改變子元素與下一個元素。下例用到 E + F 規則。 <style type='text/css'> .lg {border:solid 4px green; margin:6px} .lg:lang(zh) {background:blue} .lg:lang(zh) SPAN {background:white; color:red} .lg:lang(zh) + SPAN {background:red; color:white} </style> <span class=lg lang='zh'>中翻英： <span>我很高興在此遇見您。</span> </span> <span>I am very glad to meet you here。</span>

• 上例，Firefox, Safari, Chrome 成功；IE6 不支援 :lang()。使用 E ~ F 規則可得到相同的結果。

:HOVER, :ACTIVE 的應用。使用時要注意，在 IE6 中 :HOVER, :ACTIVE 只能用在 ANCHOR 元素。 <style type='text/css'> .hvr :lang(en) {display:none;} .hvr:hover :lang(zh) {background:red;} .hvr:active :lang(en) {background:green; display:inline; } </style> <div class=hvr> <i lang='zh'>我很高興在此遇見您。</i> <i lang='en'>I am very glad to meet you here.</i> </div>