Sélecteur universel (sélecteur CSS)-tutoriel CSS-php.cn

Sélecteur universel (sélecteur CSS)

Joseph Gordon-Levitt

Libérer： 2025-02-27 08:32:10

original

599 Les gens l'ont consulté

Universal Selector (CSS Selector)

Sélecteur universel (sélecteur CSS)

Description

Le sélecteur universel correspond à n'importe quel type d'élément. Il peut être implicite (et donc omis) si ce n'est pas le seul composant du sélecteur simple. Les deux exemples de sélecteur montrés ici sont équivalents:

*.warning {
  ⋮ <span>declarations
</span>}
.warning {
  ⋮ <span>declarations
</span>}

Copier après la connexion

Il est important de ne pas confondre le sélecteur universel avec un personnage générique - le sélecteur universel ne correspond pas à "zéro ou plus d'éléments". Considérez le fragment HTML suivant:

<body>
  <div>
    <h1>The <em>Universal</em> Selector</h1>
    <p>We must <em>emphasize</em> the following:</p>
    <ul>
      <li>It's <em>not</em> a wildcard.</li>
      <li>It matches elements regardless of <em>type</em>.</li>
    </ul>
    This is an <em>immediate</em> child of the division.
  </div>
</body>

Copier après la connexion

Le sélecteur div * em correspondra les éléments EM suivants:

"Universal" dans l'élément H1 (* correspond à la
)
«souligner» dans l'élément p (* correspond à la
)
"pas" dans le premier élément Li (* correspond à la
- )
- "Type" dans le deuxième élément Li (* correspond à la
  - )
  Cependant, il ne correspondra pas à l'élément immédiat , car c'est un enfant immédiat de l'élément div - il n'y a rien entre
  et pour que le * correspond.
  Exemple
  
  Cet ensemble de règles sera appliqué à chaque élément d'un document:
  
  * { margin: 0; padding: 0; }
  Copier après la connexion
  
  Les questions fréquemment posées sur le sélecteur universel dans CSS
  
  Quelle est la différence entre le sélecteur universel et d'autres sélecteurs dans CSS?
  
  Le sélecteur universel dans CSS est représenté par un astérisque (*) et il correspond à n'importe quel élément du document. Ceci est différent des autres sélecteurs tels que les sélecteurs de classe, les sélecteurs d'ID ou les sélecteurs d'élément qui ne correspondent qu'à des éléments spécifiques en fonction de leur classe, ID ou élément. Le sélecteur universel est un outil puissant mais doit être utilisé avec parcimonie car il peut conduire à des résultats inattendus s'ils ne sont pas utilisés avec soin.
  
  Le sélecteur universel peut-il être combiné avec d'autres sélecteurs?
  
  Oui, le sélecteur universel peut être combiné avec d'autres sélecteurs pour créer des règles plus spécifiques. Par exemple, vous pouvez combiner le sélecteur universel avec un sélecteur de classe pour appliquer un style à tous les éléments avec une classe spécifique.
  
  Quelle est la spécificité du sélecteur universel?
  
  Le sélecteur universel a la spécificité la plus basse dans CSS. Cela signifie que s'il existe des styles contradictoires, le style défini par le sélecteur universel sera remplacé par des styles définis par d'autres sélecteurs.
  
  Le sélecteur universel affecte-t-il les performances?
  
  Bien que le sélecteur universel puisse affecter les performances, l'impact est généralement négligeable sur les navigateurs modernes. Cependant, c'est toujours une bonne pratique d'utiliser des sélecteurs plus spécifiques chaque fois que possible pour réduire la quantité de travail que le navigateur doit faire.
  
  Le sélecteur universel peut-il être utilisé dans les requêtes multimédias?
  
  Oui, le sélecteur universel peut être utilisé dans les requêtes multimédias. Cela peut être utile pour appliquer des styles à tous les éléments de la page dans certaines conditions, par exemple lorsque la fenêtre est une certaine largeur.
  
  Comment le sélecteur universel interagit-il avec l'héritage dans CSS?
  
  Le sélecteur universel peut remplacer les styles héréditaires. Cependant, comme il a la spécificité la plus faible, il peut être remplacé par d'autres sélecteurs.
  
  Le sélecteur universel peut-il cibler les pseudo-éléments et les pseudo-classes?
  
  Oui, le sélecteur universel peut cibler les pseudo-éléments et les pseudo-classes. Cependant, il est généralement préférable d'utiliser des sélecteurs plus spécifiques pour ces cas.
  
  Quels sont les cas d'utilisation courants pour le sélecteur universel?
  
  Le sélecteur universel est souvent utilisé pour réinitialiser les styles, tels que la suppression des marges par défaut et le rembourrage de tous les éléments. Il peut également être utilisé pour appliquer un style à tous les éléments de la page, tels que la définition d'une police ou d'une couleur par défaut.
  
  Y a-t-il des inconvénients pour utiliser le sélecteur universel?
  
  Bien que le sélecteur universel soit un outil puissant, il devrait être utilisé avec une épave. La surutilisation peut conduire à des résultats inattendus et peut rendre votre CSS plus difficile à maintenir. Il peut également potentiellement avoir un impact sur les performances, bien que cela soit généralement négligeable sur les navigateurs modernes.
  
  Comment le sélecteur universel fonctionne-t-il dans différents navigateurs?
  
  Le sélecteur universel est pris en charge dans tous les navigateurs modernes, y compris le chrome, Firefox, Safari et Edge. Cependant, il peut y avoir de légères différences dans la façon dont elle est mise en œuvre, c'est donc toujours une bonne idée de tester votre CSS dans plusieurs navigateurs.