html - sélectionner - selecteur css3




Que fait le sélecteur CSS**? (4)

Cela sélectionne tous les éléments imbriqués dans un autre élément de la même manière que div a sélectionnerait tous les éléments <a> imbriqués quelque part dans un élément <div> .

Récemment, je suis tombé sur * * en CSS .

Référence du site - Lien du site .

Pour une seule utilisation dans une feuille de style CSS, Internet et Stack Overflow sont inondés d'exemples, mais je ne suis pas sûr d'utiliser deux * * en CSS.

Je l'ai googlé, mais incapable de trouver des informations pertinentes à ce sujet, comme un seul * sélectionne tous les éléments, mais je ne sais pas pourquoi le site l'a utilisé deux fois. Quelle est la partie manquante pour cela, et pourquoi ce hack est-il utilisé (si c'est un hack)?


Comme à chaque fois que vous mettez deux sélecteurs l'un après l'autre (par exemple li a ), vous obtenez le combinateur descendant. So * * est un élément qui est un descendant de tout autre élément - en d'autres termes, tout élément qui n'est pas l'élément racine du document entier.


* signifie appliquer des styles donnés à tous les éléments.

* * signifie appliquer des styles donnés à tous les éléments enfants de l'élément. Exemple:

body > * {
  margin: 0;
}

Cela applique des styles de marge à tous les éléments enfants du corps. De la même façon,

* * {
  margin: 0;
}

applique la margin: 0 aux éléments enfants de * . En bref, il applique la margin: 0 à presque chaque élément.

Généralement, un * est suffisant. Il n'y a pas besoin de deux * * .


Juste un petit exemple:

Essayez d'ajouter ceci sur votre site:

* { outline: 2px dotted red; }
* * { outline: 2px dotted green; }
* * * { outline: 2px dotted orange; }
* * * * { outline: 2px dotted blue; }
* * * * * { outline: 1px solid red; }
* * * * * * { outline: 1px solid green; }
* * * * * * * { outline: 1px solid orange; }
* * * * * * * * { outline: 1px solid blue; }

Démo: http://jsfiddle.net/l2aelba/sFSad/

Exemple 2:

Démo: http://jsfiddle.net/l2aelba/sFSad/34/





css-selectors