Quels types de sélecteurs de classe existe-t-il ?
- 百草original
- 2023-10-07 14:00:032113parcourir
Les types de sélecteurs de classe incluent le sélecteur de classe de base, le sélecteur multi-classe, le sélecteur de classe hiérarchique, le sélecteur de classe de sous-éléments, le sélecteur de classe frère adjacent, le sélecteur de classe frère universel, le sélecteur de classe de valeur d'attribut et les dispositifs de sélection de classe négative, etc. Introduction détaillée : 1. Le sélecteur de classe de base, utilisant un sélecteur commençant par un point, signifie sélectionner des éléments avec des noms de classe spécifiés. 2. Le sélecteur multi-classe, utilisant un sélecteur combinant plusieurs noms de classe, signifie sélectionner des éléments avec plusieurs noms spécifiés pour les éléments. des noms de classe, il n'y a pas besoin d'espaces entre plusieurs noms de classe, écrivez-les simplement consécutivement 3. Sélecteurs de classe hiérarchiques, sélecteurs séparés par des espaces, etc.
Le système d'exploitation de ce tutoriel : système Windows 10, ordinateur DELL G3.
Le sélecteur de classe est un sélecteur couramment utilisé en CSS. Il sélectionne les éléments qui répondent aux conditions via l'attribut class de l'élément. En CSS, il existe les types de sélecteurs de classe suivants :
1. Sélecteur de classe de base : utilisez un sélecteur commençant par un point (.) pour sélectionner des éléments avec un nom de classe spécifié. Par exemple, « .red » signifie sélectionner tous les éléments portant le nom de classe « rouge ».
2. Sélecteur de classes multiples : un sélecteur qui utilise une combinaison de plusieurs noms de classes pour sélectionner des éléments avec plusieurs noms de classes spécifiés. Il n'y a pas besoin d'espaces entre plusieurs noms de classe, écrivez-les simplement consécutivement. Par exemple, « .red.bold » signifie sélectionner des éléments avec les deux noms de classe « rouge » et « gras ».
3. Sélecteur de classe descendante : utilisez un sélecteur séparé par des espaces pour sélectionner des éléments avec un nom de classe spécifié parmi les éléments descendants d'un élément. Par exemple, `div .red` signifie sélectionner tous les éléments avec le nom de classe "red" parmi les descendants de l'élément `
4. Sélecteur de classe enfant : utilisez un sélecteur séparé par un signe supérieur à (>) pour sélectionner des éléments avec un nom de classe spécifié parmi les éléments enfants directs d'un élément. Par exemple, `div > .red` signifie sélectionner tous les éléments avec le nom de classe "red" parmi les éléments enfants directs de l'élément `
5. Sélecteur de classe frère adjacent : un sélecteur séparé par un signe plus (+), indiquant que l'élément avec le nom de classe spécifié dans le premier élément frère suivant immédiatement un élément est sélectionné. Par exemple, « h1 + .red » signifie sélectionner le premier élément avec le nom de classe « rouge » immédiatement après l'élément «
».
6. Sélecteur général de classe frère : utilisez un sélecteur séparé par un tilde (~) pour sélectionner les éléments avec un nom de classe spécifié parmi tous les éléments frères suivant un élément. Par exemple, `h1 ~ .red` signifie sélectionner tous les éléments avec le nom de classe "red" après l'élément `
`.
7. Sélecteur de classe de valeur d'attribut : utilisez des crochets ([]) et des signes égal (=) pour sélectionner des éléments avec des valeurs d'attribut spécifiées. Par exemple, `[class="red"]` signifie sélectionner tous les éléments dont la valeur de l'attribut `class` est "red".
8. Sélecteur de classe de négation : utilisez deux points (:not()) pour sélectionner les éléments qui n'ont pas le nom de classe spécifié. Par exemple, `:not(.red)` signifie sélectionner des éléments qui n'ont pas le nom de classe « red ».
Ce qui précède sont les types de sélecteurs de classe courants en CSS. En utilisant ces sélecteurs, nous pouvons sélectionner et styliser les éléments des pages Web en fonction de leurs noms de classe pour obtenir des effets riches et diversifiés. Dans le même temps, il peut être utilisé conjointement avec d'autres sélecteurs et sélecteurs d'attributs pour élargir davantage la portée et les conditions de sélection.
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!