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

Question

J'ai trouvé ce code CSS et je l'ai exécuté pour voir ce qu'il faisait et il a souligné TOUS les éléments de la page,

*Quelqu'un peut-il expliquer ce qu'est l'astérisque `` 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>

Answer 1

Il s'agit d'un caractère générique, ce qui signifie qu'il sélectionnera tous les éléments dans cette partie du DOM.

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

* {
    margin: 10px;
}

Vous pouvez également l'utiliser à l'intérieur de sous-sélections. Par exemple, le texte suivant ajouterait une marge à tous les éléments à l'intérieur d'une balise de paragraphe :

p * {
    margin: 10px;
}

Votre exemple consiste à appliquer des bordures et des marges consécutives à des éléments pour leur donner des bordures de couleurs multiples. Par exemple, une bordure blanche entourée d'une bordure noire.

Answer 2

Le CSS que vous avez référencé est très utile à un concepteur de sites web pour déboguer les problèmes de mise en page. Il m'arrive souvent de l'insérer temporairement dans la page afin de voir la taille de tous les éléments de la page et de repérer, par exemple, celui qui a trop d'espacement, ce qui fait que d'autres éléments ne sont pas à leur place.

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

Answer 3

* est un caractère générique. Cela signifie qu'il appliquera le style à n'importe quel élément HTML. Les * supplémentaires appliquent le style à un niveau d'imbrication correspondant.

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

Answer 4

* agit comme un joker, comme dans la plupart des autres cas.

Si c'est le cas :

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

Entonces todos Les éléments HTML auront ces styles.

Answer 5

Dans votre feuille de style, vous devez généralement définir des règles de base pour tous les éléments, telles que l'attribut font-size et les marges. {font-size:14px ; margin:0 ; padding:0;} / annule les paramètres par défaut du navigateur sur les éléments, toutes les polices de texte seront rendues à la taille de 14 pixels avec une marge et un rembourrage nuls, y compris h1,...pre. */