Maison > Article > interface Web > Comment utiliser la langue du sélecteur d'attribut spécifique en CSS ? Introduction à l'utilisation (explication détaillée)
Comment utiliser la langue du sélecteur d'attribut spécifique en CSS ? Introduction à l'utilisation (explication détaillée)
- 青灯夜游original
- 2018-09-17 16:40:153090parcourir
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:属性；
}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;
}Veuillez regarder à nouveau l'exemple suivant :
*[lang|="en"] {color: red;}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>
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>Rendu :
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!