CSSで特定の属性セレクターlangを使用するにはどうすればよいですか?使い方の紹介（詳しい説明）-CSSチュートリアル-php.cn

CSSで特定の属性セレクターlangを使用するにはどうすればよいですか?使い方の紹介（詳しい説明）

青灯夜游

リリース： 2018-09-17 16:40:15

オリジナル

3130 人が閲覧しました

CSS 2 では、属性と属性値に基づいて要素を選択できる属性セレクターが導入されました。この章では、CSS固有の属性セレクターlangの使い方（詳細説明）を紹介します。困っている友人は参考にしていただければ幸いです。

css :lang セレクター定義の使用法入門

lang 指定された lang 属性で始まる要素にスタイルを追加します。

注: 値は、lang="en" のように単語全体、または lang="en-us" のようにハイフン (-) を付けたものです。

構文:

:lang {
   style:属性；
}

ログイン後にコピー

lang 使用例:

各要素の lang 属性値は、「abstract」と同じです。 " 背景色設定赤の場合。

p:lang(abstract){ 
background:red;
}

ログイン後にコピー

次の例をもう一度見てください:

*[lang|="en"] {color: red;}

ログイン後にコピー

上記のルールは、lang 属性が en に等しいか en- で始まるすべての要素を選択します。したがって、次のマークアップ例の最初の 3 つの要素は選択されますが、最後の 2 つの要素は選択されません:

<p lang="en">段落en</p>
<p lang="en-us">段落en-us</p>
<p lang="en-au">段落en-au</p>
<p lang="fr">段落fr</p>
<p lang="cy-en">段落xy-en</p>

ログイン後にコピー

langFull example

<!DOCTYPE HTML> 
<html> 
    <head> 
     <meta charset="UTF-8">
        <style type="text/css"> 
        :lang(en) { 
         color:blue;  
         display: block;
         text-decoration: none;
        } 
        </style> 
    </head> 
    <body> 
<a href="#"> phpstudy </a> 
        <a>HTML</a>
        <a href="#"> 511遇见</a> 

    </body> 
</html>

ログイン後にコピー

レンダリング:

CSSで特定の属性セレクターlangを使用するにはどうすればよいですか?使い方の紹介（詳しい説明）