Les sélecteurs CSS en détail

Sélecteur de base CSS3

Afin de mieux illustrer le problème, créez d'abord une structure DOM simple, comme suit :

<div> 
    <ul> 
       <li>1</li> 
       <li>2</li> 
       <li>3</li> 
       <li>4</li> 
       <li>5</li> 
       <li>6</li> 
       <li>7</li> 
       <li>8</li> 
       <li>9</li> 
       <li>10</li> 
   </ul> 
</div>

1. Sélecteur de caractère générique (*)
Le sélecteur de caractère générique est utilisé pour sélectionner tous les éléments ou tous les éléments sous un certain élément. Par exemple :

Le code est le suivant :
*{ marigin: 0; padding: 0; >
Vous devez avoir souvent vu le code ci-dessus dans le fichier de style de réinitialisation. est que tous les éléments La marge et le remplissage sont tous deux définis sur 0. L'autre consiste à sélectionner tous les éléments sous un certain élément :

Le code est le suivant :

.demo * {border: 1px bleu uni ;>

2. Sélecteur d'élément (E)
Le sélecteur d'élément est le sélecteur le plus courant et le plus basique parmi les sélecteurs CSS. Les sélecteurs d'éléments sont en fait des éléments du document, tels que html, body, p, div, etc. Par exemple, dans notre démo : les éléments incluent div, ul, li, etc.

Le code est le suivant :

li {background-color: gray;color: orange;}

3. )
Le sélecteur de classe spécifie le style d'une manière indépendante de l'élément du document Avant d'utiliser le sélecteur de classe, vous devez définir le nom de la classe sur l'élément html. name existe dans la balise html afin que la classe puisse être sélectionnée :

2

", nous ajoutons un nom de classe à li afin que les sélecteurs de classe fonctionnent correctement, ce qui facilite l'association des styles de sélecteur de classe aux éléments.

.important {font-weight: bold; color: yellow;}
Le code ci-dessus signifie ajouter un style "font-weight: bold, color: yellow" à l'élément avec le nom de classe important ;
Le sélecteur de classe peut également avoir plusieurs noms de classe. Nous avons également vu ci-dessus qu'il y a deux noms de classe ou plus dans notre élément li en même temps, et ils sont séparés par des espaces. utilisez plusieurs noms de classe. Les classes sont connectées entre elles, telles que :

Le code est le suivant :

.important {font-weight: bold;}

.active {couleur : vert;fond : citron vert ;}
.items {couleur : #fff;fond : #000;}
.important.items {fond :#ccc;}
.premier.dernier {color: blue;}

Comme le montre le code ci-dessus, le sélecteur ".important.items" ne fonctionne que pour les éléments qui contiennent à la fois les classes "important" et "items". navigateurs Les sélecteurs de classe sont pris en charge, mais les sélecteurs multi-classes (.className1.className2) ne sont pas pris en charge par ie6.

5. Sélecteur descendant (Ｅ F)

Le sélecteur descendant est également appelé sélecteur contenant. Sa fonction est de sélectionner les éléments descendants d'un certain élément, par exemple : E F, avant que E soit. l'élément ancêtre et F est l'élément descendant. Cela signifie que tous les éléments F descendants de l'élément E sont sélectionnés. Veuillez noter qu'ils doivent être séparés par un espace. Ici, F sera sélectionné indépendamment du fait qu'il s'agisse d'un élément enfant ou d'un élément petit-enfant de l'élément E ou d'une relation plus profonde. En d'autres termes, quel que soit le nombre de niveaux de relations que F a dans E, il sera sélectionné :

.

.demo li {color: blue;}

Ce qui précède signifie que tous les éléments li dans div.demo sont sélectionnés

6. Sélecteur d'élément enfant (E>F)

Le sélecteur d'élément enfant ne peut sélectionner que les éléments enfants d'un certain élément, où E est l'élément parent et F est l'élément enfant E>F signifie que tous les éléments enfants F sous l'élément E sont sélectionnés. Ceci est différent du sélecteur descendant (EF), dans lequel F est un élément descendant de E, et du sélecteur d'élément enfant E >

ul > li {fond : vert;couleur : jaune;} Le code sur
indique que tous les sous-éléments li sous ul sont sélectionnés. Par exemple :
IE6 ne prend pas en charge les sélecteurs d'éléments enfants.

7. Sélecteur d'éléments frères et sœurs adjacents (E F)

Le sélecteur d'éléments frères et sœurs adjacents peut sélectionner des éléments immédiatement après un autre élément, et ils ont le même élément parent, en d'autres termes. , les deux éléments EF ont le même élément parent et l'élément F est derrière l'élément E et adjacent, nous pouvons donc utiliser le sélecteur d'élément frère adjacent pour sélectionner l'élément F.

Le code est le suivant :

li li {fond : vert;couleur : jaune; bordure : 1px solide #ccc;}

ci-dessus Le code indique que l'élément adjacent li de li est sélectionné. Nous avons ici dix li au total, donc le code ci-dessus sélectionne le 2ème li au 10ème li, un total de neuf

IE6 ne le fait pas. prend en charge ce sélecteur

8. Sélecteur universel de frères et sœurs (Ｅ～Ｆ)

Le sélecteur d'éléments frères universel est un nouveau sélecteur ajouté à CSS3. Ce sélecteur sélectionnera tous les éléments frères derrière un élément. sont également similaires aux éléments frères adjacents et doivent être dans le même élément parent. En d'autres termes, les éléments E et F appartiennent au même élément parent et l'élément F est après l'élément E, alors le sélecteur E ~ F le fera. sélectionnez les éléments F après tous les éléments E dans . Par exemple, le code suivant :

Le code est le suivant :

.active ~ li {background: green;color: yellow; border: 1px solid #ccc;}

Ce que représente le code ci-dessus, c'est que l'élément derrière l'élément li.active est sélectionné . Tous les éléments frères li

9. Sélecteur de groupe (sélecteur1, sélecteur2,...,sélecteurN)

Le sélecteur de groupe est un élément qui aura le même style Groupe. ensemble, utilisez des virgules "," pour séparer chaque sélecteur, comme indiqué ci-dessus selector1, selector2,..., selectorN. Cette virgule indique au navigateur que la règle contient plusieurs sélecteurs différents. S'il n'y a pas de virgule, alors la signification exprimée est complètement différente. L'omission de la virgule devient le sélecteur descendant que nous avons mentionné plus tôt.

Pour une introduction plus détaillée aux sélecteurs CSS et aux articles connexes, veuillez faire attention au site Web PHP chinois !