Sélecteur de propriété CSS
1. Qu'est-ce qu'un sélecteur d'attribut ?
Le sélecteur d'attribut fait référence à l'utilisation de la balise d'attribut HTML comme sélecteur. Les attributs spécifiés définissent les styles pour les éléments HTML.
Les sélecteurs d'attributs peuvent définir des styles pour les éléments HTML avec des attributs spécifiés, pas seulement les attributs de classe et d'identifiant.
Rappel chaleureux : si vous utilisez le navigateur IE, la sélection d'attributs n'est pas prise en charge dans IE6 ou les versions inférieures. IE7 ne prend en charge l'utilisation de sélecteurs d'attribut que lorsque !DOCTYPE est spécifié.
2. Syntaxe du sélecteur d'attribut
Le sélecteur d'attribut est affiché avec []. Style :
[titre]
{
couleur : rouge ;
}
Sélecteur d'attribut simple
Il ne se soucie que de son nom mais pas de sa valeur. C'est la caractéristique du sélecteur d'attribut simple.
h1[class] {color: silver;} sera appliqué à tout élément h1 avec classe, quelle que soit la valeur de la classe. Donc le h1 de <h1 class="hoopla">Bonjour</h1>, <h1 class="severe">Sérénité</h1>, <h1 class="fancy">Fooling</h1> ; sera affecté par cette règle.
Bien sûr, cet "attribut" n'est pas seulement une classe ou un identifiant, il peut s'agir de tous les attributs légaux de l'élément, tels que l'alt d'img, donc img[alt]{css déclarations ici;} agira sur n'importe quel fichier avec élément img avec attribut alt. Qu'en est-il d'un[href][title] {font-weight: bold;} ? Si vous êtes intelligent, vous devez déjà savoir que cela affectera l'élément a avec les attributs href et title, tels que <a href="http://php.cn/" title="php Home">< /a>
Sélecteur de valeur d'attribut précis
id et class sont essentiellement des sélecteurs de valeur d'attribut précis Oui, h1#logo est égal à h1[id="logo"] . Comme mentionné précédemment, nous ne sommes pas limités à l’identifiant ou à la classe, nous pouvons utiliser n’importe quel attribut ! Par exemple, a[href="http://php.cn/"][title="W3C Home"] {font-size: 200%;} fonctionnera sur<a href="http://php.cn /" title="Accueil php"></a>.
Sélecteur de valeur d'attribut partiel
Comme son nom l'indique, tant que la valeur d'attribut correspond partiellement (la partie ici correspond en fait au mot entier), il agira sur le élément. Regardons un exemple :
<p class="urgent warn">Lors de la manipulation du plutonium, il faut veiller à éviter la formation d'une masse critique.</ p> ;p[class~="warning"] {font-weight: bold;}
et
p[class~="urgent"] {font-weight: bold;}
peut rendre la police de ce p plus épaisse.
Ce sélecteur est très utile Par exemple, si vous souhaitez styliser une illustration et que le titre contient la chaîne "Figure", par exemple, title = "Figure 5 : xxx description. ", alors vous pouvez utiliser img[title~="Figure"].
[title] : Sélectionnez un élément avec l'attribut title
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php.cn</title>
<style>
h1[title]{
color:red;
}
</style>
</head>
<body>
<h1 title = "属性选择器">标题<h1>
<p>这是内容</p>
<h1>标题<h1>
<p>这是内容</p>
</body>
</html>[title='hello'] : Sélectionnez l'élément dont l'attribut est title et la valeur est hello
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php.cn</title>
<style>
h1[title = "hello"]{
color:red;
}
</style>
</head>
<body>
<h1 title = "属性选择器">标题<h1>
<p>这是内容</p>
<h1 title = "hello">标题<h1>
<p>这是内容</p>
</body>
</html>[title*='hello'] : Sélectionnez l'élément dont l'attribut est title et qui contient hello
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php.cn</title>
<style>
h1[title*="hello"]{
color:red;
}
</style>
</head>
<body>
<h1 title = "hellocss">标题<h1>
<p>这是内容</p>
<h1 title = "hello css">标题<h1>
<p>这是内容</p>
</body>
</html>
