26

次のように、言語ごとに異なるスタイルを指定できるようにする CSS 言語疑似クラス。

html:lang(en) .foo { ... }

ただし、これは IE7 では機能しないため、属性セレクターを使用しています。

html[lang="en"] .foo { ... }

やっていることは同じに見えますが、微妙な違いはありますか？そうでない場合、属性セレクターがまったく同じことを行うのに、CSS に言語疑似クラスがあるのはなぜでしょうか?

4

4 に答える 4

36

HTML では、:lang()疑似クラスと属性セレクターの両方が、要素を対応するlang属性と照合します。

:lang()相違点は、ブラウザーは、ドキュメント言語および/または実装によって定義される可能性のある疑似クラスに対してテストするときに、特定の要素の言語を決定する他の方法を持っている可能性があるのに対し、属性セレクターはその要素のみをチェックすることです。ドキュメントベースのセマンティクスを伴わない、指定された属性。

たとえば、HTML では、疑似クラスはlang、ブラウザが子孫の言語を決定する方法に応じて、異なる が存在しない要素の子孫にも一致します。通常、言語属性が明示的に設定されていない場合、子孫は祖先から言語属性を継承します。

仕様には次のように書かれています。

と '|=' 演算子の違いは:lang(C)、'|=' 演算子は要素の特定の属性に対してのみ比較を実行するのに対し、:lang(C)疑似クラスはドキュメントのセマンティクスに関する UA の知識を使用して比較を実行することです。

この HTML の例では、BODY のみが一致[lang|=fr]しますが (LANG 属性があるため)、BODY と P の両方が一致し:lang(fr)ます (両方ともフランス語であるため)。P は[lang|=fr]LANG 属性を持たないため、 と一致しません。

<body lang=fr>
  <p>Je suis français.</p>
</body>

「LANG 属性を持っている」および「フランス語である」という特定の言い回しに注目してください。ご想像のとおり、これら 2 つのフレーズは英語ではまったく異なる意味を持ちます。

あなたの例では、次のセレクターも.foo要素に一致します。

.foo:lang(en)

ただし、独自のlang属性セットがない場合、次のセレクターはそうではありません。

.foo[lang="en"]
.foo[lang|="en"]

ブラウザーのサポートに関しては、:lang()疑似クラスは IE8 からサポートされているため、IE7 は、属性セレクターで疑似クラスを使用してサポートできない唯一のブラウザーです。

この理解に基づいて、「どちらを使用する必要があるか」という質問に答えることができます。特定の癖 (または IE7 をサポートする必要性) によって代わりに属性セレクターを使用して回避する必要がない限り、常に:lang()デフォルトで疑似クラスを使用する必要があります。

セレクター 4 は、疑似クラスに拡張機能をもたらす:lang()(それによって属性セレクターとの間の機能のギャップを広げる) だけでなく、方向性に基づいて要素を照合するための疑似クラスも導入します。:dir()方向性は言語関連のプロパティであるため、dirとlang属性は HTML でも同様に機能し、 とそれに対応する属性セレクターの違いは、:dir()とそれに対応する属性セレクターの違いに似てい:lang()ます。次の引用の最初の文が実際、以下を説明するセクションの同じ段落の逐語コピー:lang():

:dir(C) と ''[dir=C]'' の違いは、''[dir=C]'' は要素の特定の属性に対してのみ比較を実行するのに対し、:dir(C) は疑似クラスは、ドキュメントのセマンティクスに関する UA の知識を使用して比較を実行します。たとえば、HTML では、要素の方向性が継承されるため、dir 属性を持たない子は、有効な dir 属性を持つ最も近い祖先と同じ方向性を持ちます。別の例として、HTML では、''[dir=auto]'' に一致する要素は、その内容によって決定される要素の解決された方向性に応じて、:dir(ltr) または :dir(rtl) のいずれかに一致します。[HTML5]

于 2012-01-18T19:48:46.370 に答える
5

他の誰も言及していないもう 1 つのこと -:lang()疑似クラスは、要素の言語を設定する方法には関心がありません。XHTML ドキュメント (XML MIME タイプの真の XHTML) では、 を使用できますがxml:lang="en"、要素は一致しますが、一致:lang(en)しません[lang="en"]。

于 2012-01-18T20:02:31.683 に答える
3

スペックによると、

ドキュメント言語が要素の人間の言語を決定する方法を指定する場合、その言語に基づいて要素に一致するセレクターを CSS で記述することができます。たとえば、HTML [HTML4] では、言語は「lang」属性、META 要素、およびおそらくプロトコルからの情報 (HTTP ヘッダーなど) の組み合わせによって決定されます。XML は xml:lang という属性を使用しますが、言語を判別するためのドキュメント言語固有の方法が他にもある場合があります。

疑似クラス ':lang(C)' は、要素が言語 C にある場合に一致します。一致するかどうかは、識別子 C が要素の言語値と等しいか、ハイフンで区切られた部分文字列であることにのみ基づいています。 '|=' 演算子で実行された場合と同じ方法で。エレメントの言語値に対する C のマッチングは、ASCII 範囲内の文字に対して大文字と小文字を区別せずに実行されます。識別子 C は、有効な言語名である必要はありません。

あれは：

  1. langsimple属性 以外にも、言語を指定する他の多くの方法で機能します。
    • 最も重要なことは、@BoltClock の回答で詳しく説明されているように、言語は子要素によって継承されるため、要素自体だけでなく、コンテナー要素で (何らかの方法で) 指定された言語を使用することです。
  2. セマンティクスを使用します。|=つまり:lang(en)、:lang(us)と の両方が一致しspan[lang=en-us]ます。
  3. 大文字と小文字を区別しないことが保証されていますが、

セレクターの属性名と値の大文字と小文字の区別は、ドキュメントの言語によって異なります。

于 2012-01-18T19:52:55.920 に答える
0

htmlCSS は、タグ属性だけでなく、すべての要素の属性セレクターをサポートしていlangます。たとえば、css<a title="Jeeha" href="foo.html">bar</a>のように html を選択できます。a[title=Jeeha] { ... }

部分一致とバリアントの詳細については、このリンクを参照してください。

于 2012-01-18T19:51:52.780 に答える