CSS :hasSélecteurs
Manuel de référence complet des sélecteurs CSS
Exemple
Nous voulons appliquer des styles à l'élément conteneur<div>Du sous-élément.parentélément :
Essayez-le vous-même »
Définition et utilisation
La pseudo-classe :has en CSS est un sélecteur qui vous permet de sélectionner un élément en fonction de ses éléments descendants.
La pseudo-classe :has est très utile dans les sélecteurs CSS car elle vous permet de sélectionner des éléments selon des conditions plus complexes.
:hasLa pseudo-classe est une fonctionnalité relativement récente en CSS et peut ne pas être prise en charge par tous les navigateurs. Avant de l'utiliser, il est recommandé de vérifier la compatibilité des navigateurs.:hasLes pseudo-classes ne peuvent pas être*Utilisées conjointement avec des sélecteurs, elles ne peuvent être utilisées qu'avec des sélecteurs de type (tels quediv、spanetc.) ou utilisées conjointement avec des sélecteurs de classe.
Prise en charge des navigateurs
Les nombres dans le tableau indiquent le premier numéro de version du navigateur qui prend en charge la propriété.
| Sélecteurs | |||||
|---|---|---|---|---|---|
| :invalid | 10.0 | 10.0 | 4.0 | 5.0 | 10.0 |
Syntaxe CSS
parent:has(selector) {
/* 样式规则 */
}
parent: Indique le sélecteur de l'élément parent.selector: Indique le sélecteur de l'élément enfant que vous souhaitez trouver dans l'élément parent.
Plus d’exemples
Sélectionner les éléments contenant un nom de classe spécifique
Exemple
Si vous souhaitez sélectionner un élément parent qui contient un élément enfant avec le nom de classe .active :
Essayez-le vous-même »
Sélectionner les éléments contenant plusieurs éléments enfants spécifiques
Exemple
Si vous souhaitez sélectionner des éléments qui contiennent simultanément<li>et<div>Du sous-élément<ul>élément :
Essayez-le vous-même »
Le code ci-dessus ajoutera une bordure bleue en pointillés aux éléments qui contiennent simultanément<li>et<div>Du sous-élément<ul>Ajoutez une bordure bleue en pointillés aux éléments.
autres extensions