web-dev-qa-db-fra.com

Que fait un astérisque (*) dans un sélecteur CSS?

J'ai trouvé ce code CSS et je l'ai exécuté pour voir ce qu'il faisait et il a souligné CHAQUE élément sur la page, 

Quelqu'un peut-il expliquer ce que l'astérisque * fait en CSS? 

<style>
* { 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 }
</style>
csscss-selectors
90
JasonDavis

C'est un caractère générique, cela signifie qu'il va sélectionner tous les éléments dans cette partie du DOM.

Par exemple, si je veux appliquer une marge à chaque élément de la page, vous pouvez utiliser:

* {
    margin: 10px;
}

Vous pouvez également l'utiliser dans les sous-sélections. Par exemple, les éléments suivants ajouteraient une marge à tous les éléments d'une balise de paragraphe:

p * {
    margin: 10px;
}

Votre exemple utilise des astuces css pour appliquer des bordures et des marges consécutives à des éléments afin de leur donner plusieurs bordures colorées. Par exemple, une bordure blanche entourée d'une bordure noire.

89
Soviut

Le CSS que vous avez référencé est très utile au concepteur Web pour résoudre les problèmes de mise en page. Je le laisse souvent tomber temporairement dans la page pour que je puisse voir la taille de tous les éléments de la page et suivre, par exemple, celui qui a trop de bourrage, ce qui déplace d'autres éléments hors de propos. 

La même astuce peut être utilisée avec seulement la première ligne, mais l'avantage de la définition de plusieurs contours est que vous obtenez un indice visuel via la couleur de la bordure à la hiérarchie des éléments de page imbriqués.

29
Tom

* est un joker. Cela signifie que le style sera appliqué à tout élément HTML. Des * supplémentaires appliquent le style à un niveau d'imbrication correspondant.

Ce sélecteur appliquera des contours de couleurs différentes à tous les éléments d'une page, en fonction du niveau d'imbrication des éléments.

4
futureelite7

* agit comme un caractère générique, comme dans la plupart des autres cas.

Si tu fais:

*{
  margin: 0px;
  padding: 0px;
  border: 1px solid red;
}

Ensuite, tous éléments HTML auront ces styles.

4
Mike Trpcic

dans votre feuille de style, vous devez généralement définir une règle de base pour tous les éléments, tels que les attributs de taille de police et les marges . {font-size: 14px; marge: 0; padding: 0;} /écrasant les paramètres par défaut du navigateur, la taille du texte de la police sera de 14 pixels avec une marge et un remplissage de 0, y compris h1, ... pre. * /

0
Mikel bradley benjamin