communauté Apprendre Bibliothèque d'outils Loisirs
recherche
Français

Sélecteur de propriété CSS

Sélecteur d'attribut CSS

CSS 2 introduit le sélecteur d'attribut.

Le sélecteur d'attributs peut sélectionner des éléments en fonction de leurs attributs et valeurs d'attribut.


(1)[att*=val]; (2)[att^=val];(3)[att$=val];

1 : [att*=val];Explication : Si la valeur de l'attribut de l'élément représenté par att contient le caractère spécifié par val, alors l'élément utilise ce style.

<html> 
<head>
<style>
[id*=section]{
    background-color:red;
    }
    </style>
    </head>
    <body>
    <p id="sections9999">
    </p>
    </body>
    </html>

Effet opérationnel : Sauf pour ie D'autres peuvent être affichés normalement. .

2:[att^=val];Explication : Si la valeur de l'attribut de l'élément représenté par att commence par le caractère spécifié par val, alors l'élément utilise ce style. (En fait, vous pouvez comprendre que ^ correspond au début de l'expression régulière...)

Effet de l'opération : sauf pour IE, tout le reste peut être affiché normalement. .

3:[att$=val];Explication : Si la valeur de l'attribut de l'élément représenté par att se termine par le caractère spécifié par val, alors l'élément utilise ce style. (Dans l'expression régulière, $ correspond à la fin...)

Effet de l'opération : sauf pour IE, tout le reste peut être affiché normalement. .

Regardons un autre exemple : 

<html> 
<head>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
<style>
a[href$=\/]:after,a[href$=html]:after,a[href$=htm]:after{
    content:"web网页";
    color:red;
}
a[href$=jpg]:after{
    content:"JPG图像素材";
    color:green;
}
</style>
</head>
<body>
<ul>
<li><a href="#">博客</a></li>
<li><a href="#">css选择器</a></li>
<li><a href="#">图像素材</a></li>
</ul>
</body>
</html>

Effet de l'opération : à l'exception d'IE, tout le reste peut être affiché normalement. .


Formation continue
||
<html> <head> <meta content="text/html; charset=UTF-8" http-equiv="Content-Type"> <style> a[href$=\/]:after,a[href$=html]:after,a[href$=htm]:after{ content:"web网页"; color:red; } a[href$=jpg]:after{ content:"JPG图像素材"; color:green; } </style> </head> <body> <ul> <li><a href="#">博客</a></li> <li><a href="#">css选择器</a></li> <li><a href="#">图像素材</a></li> </ul> </body> </html>
soumettreRéinitialiser le code
Section précédente Aucun
Liste des didacticiels
obtenir de l'aide
  • Recommandations de cours
  • Téléchargement du didacticiel
Le didacticiel n'est pas disponible au téléchargement pour le moment. Le staff est actuellement en train de l'organiser. Veuillez prêter plus d'attention à ce cours à l'avenir ~

Les étudiants qui ont regardé ce cours apprennent également

Le dernier didacticiel vidéo ThinkPHP 5.1 en première mondiale (60 jours pour devenir un expert PHP en ligne)  492410 joue