Comment utiliser la langue du sélecteur d'attribut spécifique en CSS ? Introduction à l'utilisation (explication détaillée)-tutoriel CSS-php.cn

Comment utiliser la langue du sélecteur d'attribut spécifique en CSS ? Introduction à l'utilisation (explication détaillée)

青灯夜游

Libérer： 2018-09-17 16:40:15

original

3132 Les gens l'ont consulté

CSS 2 a introduit des sélecteurs d'attributs, qui peuvent sélectionner des éléments en fonction de leurs attributs et valeurs d'attribut. Ce chapitre vous présentera comment utiliser la langue du sélecteur d'attribut spécifique CSS (explication détaillée). Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il vous sera utile.

css :lang introduction à l'utilisation de la définition du sélecteur

lang ajoute un style à l'élément commençant par l'attribut lang spécifié.

Remarque : Les valeurs sont des mots entiers, seuls comme lang="en", ou avec un trait d'union (-) comme lang="en-us".

Syntaxe :

:lang {
   style:属性；
}

Copier après la connexion

Exemple d'utilisation de la langue :

La valeur de l'attribut lang de chaque élément est égale à " abstract" background La couleur est définie sur rouge.

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

Copier après la connexion

Veuillez regarder à nouveau l'exemple suivant :

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

Copier après la connexion

La règle ci-dessus sélectionnera tous les éléments dont l'attribut lang est égal à en ou commence par en-. Par conséquent, les trois premiers éléments de l'exemple de balisage suivant seront sélectionnés, mais les deux derniers éléments ne seront pas sélectionnés :

<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>

Copier après la connexion

lang Exemple complet

<!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>

Copier après la connexion

Rendu :

Comment utiliser la langue du sélecteur dattribut spécifique en CSS ? Introduction à lutilisation (explication détaillée)