Maison > Article > interface Web > Sélecteurs génériques (*, ^ et $) en CSS pour les classes
Sélecteurs génériques (*, ^ et $) en CSS pour les classes
- 王林avant
- 2023-09-04 09:57:111504parcourir
En CSS, les sélecteurs sont utilisés pour sélectionner des éléments par nom de classe, identifiant, balise, etc. Il existe également des sélecteurs génériques disponibles en CSS que nous pouvons utiliser pour définir des requêtes qui sélectionnent des éléments HTML.
Les sélecteurs de caractères génériques nous permettent de sélectionner des éléments HTML qui contiennent une sous-chaîne spécifique dans la valeur d'un attribut spécifique (tel qu'une classe ou un identifiant). Dans ce didacticiel, nous apprendrons à utiliser les sélecteurs génériques *, ^ et $ pour représenter les classes et les identifiants.
CSS contient (*=) un sélecteur de caractère générique
Le sélecteur de caractère générique Contient (*=) permet aux développeurs de rechercher tous les éléments HTML dont la valeur d'attribut contient « chaîne » comme sous-chaîne. Par exemple, l'utilisation du sélecteur de caractère générique "*" sur une classe recherche tous les éléments HTML dont le nom de classe contient cette chaîne.
Grammaire
Les utilisateurs peuvent utiliser des sélecteurs génériques contenant (*) pour les classes selon la syntaxe suivante.
[class*="string"] {
}
La syntaxe ci-dessus sélectionne tous les éléments HTML qui contiennent « chaîne » comme sous-chaîne dans le nom de la classe.
Exemple
Dans l'exemple ci-dessous, nous avons créé quatre éléments div différents et y avons ajouté du texte en fonction de leurs noms de classe. En CSS, nous utilisons le sélecteur de caractère générique « contient » pour sélectionner tous les éléments div dont le nom de classe contient « test » comme sous-chaîne.
Dans la sortie, l'utilisateur peut observer que la couleur du texte des deux premiers éléments div est rouge car il contient le nom de la classe avec la sous-chaîne "test".
<html>
<head>
<style>
[class*="test"] {
color: red;
font-size: 2rem;
}
</style>
</head>
<body>
<h2> Using the <i> contains (*=) </i> wildcard CSS selector in CSS. </h2>
<div class = "test1"> This is a text with the class name test1.</div>
<div class = "sampletest"> This is a text with the class name sampletest. </div>
<div class = "demo"> This is a text with the class name demo test. </div>
<div class = "element"> This is a text with the class name element.</div>
</body>
</html>
Sélecteurs de caractères génériques CSS commençant par (^=)
Commençant par (^=) les sélecteurs de caractères génériques nous permettent de sélectionner tous les éléments HTML dont les valeurs d'attribut commencent par une sous-chaîne spécifique.
Grammaire
Les utilisateurs peuvent utiliser des sélecteurs commençant par des caractères génériques pour les classes selon la syntaxe suivante.
[class^="string"] {
}
La syntaxe ci-dessus sélectionne tous les éléments HTML dont le nom de classe commence par "string".
Exemple
Dans l'exemple ci-dessous, nous avons utilisé des sélecteurs CSS génériques commençant par (^=) et des classes pour sélectionner des éléments en fonction des noms de classe.
Dans la sortie, l'utilisateur peut observer que le texte des premier et troisième éléments div devient bleu car il contient la chaîne "test" au début. Le deuxième élément div contient "test" dans le nom de la classe, mais il se trouve à la fin du nom de la classe et n'est donc pas sélectionné par le sélecteur de caractère générique de début (^=).
<html>
<head>
<style>
[class^="test"] {
color: blue;
font-weight: bold;
}
</style>
</head>
<body>
<h2> Using the <i> starts with (^=) </i> wildcard CSS selector in CSS </h2>
<div class = "test1"> This is a text with the class name test1.</div>
<div class = "sampletest"> This is a text with the class name sampletest. </div>
<div class = "testdemo"> This is a text with the class name testdemo test. </div>
<div class = "element"> This is a text with the class name element. </div>
</body>
</html>
CSS se termine par un sélecteur de caractère générique ($=)
Un sélecteur générique se terminant par ($=) sélectionne tous les éléments HTML si une valeur d'attribut spécifique contient une sous-chaîne à la fin. Par exemple, si les noms de classe de deux éléments différents sont "onestart" et "lastone" et que la sous-chaîne est "one", il sélectionnera un élément HTML avec uniquement le nom de classe "lastone" car il contient la première fin de la sous-chaîne. .
Grammaire
Les utilisateurs peuvent utiliser des sélecteurs CSS génériques se terminant par ($=) sur les classes selon la syntaxe suivante.
[class$="string"] {
}
La syntaxe ci-dessus sélectionne tous les éléments HTML dont le nom de classe se termine par la sous-chaîne "string".
Exemple
Dans l'exemple ci-dessous, les deuxième nd et quatrième éléments div contiennent la sous-chaîne "test" à la fin de la valeur du nom de classe. Nous utilisons un sélecteur CSS avec un caractère générique ($=) à la fin pour sélectionner deux éléments div et leur appliquer des bordures, des marges et un remplissage.
<html>
<head>
<style>
[class$="test"] {
border: 2px solid pink;
padding: 5px 10px;
margin: 5px;
}
</style>
</head>
<body>
<h2> Using the <i> ends with ($=) </i> wildcard CSS selector in CSS.</h2>
<div class = "test1"> This is a text with the class name test1.</div>
<div class = "sampletest"> This is a text with the class name sampletest. </div>
<div class = "testdemo"> This is a text with the class name testdemo test. </div>
<div class = "elementtest"> This is a text with the class name elementtest. </div>
</body>
</html>
Exemple
Dans l'exemple ci-dessous, nous utilisons des sélecteurs CSS se terminant par id au lieu d'utiliser des classes comme attributs. Il montre comment sélectionner des éléments HTML à l'aide d'autres propriétés et de sélecteurs CSS génériques.
Ici, nous sélectionnons tous les éléments HTML dont la valeur id contient « nom » à la fin et modifions le style et la couleur de la police.
<html>
<head>
<style>
[id$="name"] {
color: lightskyblue;
font-style: italic;
font-size: 1.5rem;
}
</style>
</head>
<body>
<h2> Using the <i> ends with ($=) </i> wildcard CSS selector in CSS.</h2>
<div id = "firstname"> id == firstname </div>
<div id = "lastname"> id == lastname </div>
<div id = "age"> id == age </div>
<div id = "namestart"> id == namestart </div>
</body>
</html>
L'utilisateur a appris à utiliser les sélecteurs CSS génériques avec les classes. Les utilisateurs peuvent utiliser le sélecteur CSS contain (*=) pour obtenir des éléments dont la valeur d'attribut contient une sous-chaîne au milieu, et utiliser le sélecteur CSS (^=) pour obtenir des éléments dont la valeur d'attribut contient une sous-chaîne au début et se termine par ($ ). =) La fin.
De plus, les utilisateurs ont appris à utiliser les sélecteurs CSS génériques avec d'autres propriétés, telles que l'identifiant dans l'exemple précédent.
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!