Page d'accueil>Tutoriel de conception de sites Web>Tutoriel CSS

Conquérir les sélecteurs CSS avancés

Auteur：Eve Cole Date de mise à jour：2009-09-07 21:27:44

Article original : Conquérir les sélecteurs CSS avancés
Traduit de :Apprivoiser les sélecteurs CSS avancés

CSS est l'un des outils les plus puissants disponibles pour les concepteurs Web. Grâce à lui, nous pouvons changer l'interface d'un site Web en quelques minutes sans changer les balises de la page. Mais malgré le fait que chacun de nous se rend compte de son utilité, les sélecteurs CSS sont loin d'atteindre leur potentiel, et parfois nous avons tendance à utiliser des classes, des identifiants, des divs, des spans, etc. excessifs et inutiles. Notre HTML est très compliqué.

La meilleure façon d'éviter ces fléaux dans vos balises et de les garder concises et sémantiques est d'utiliser des sélecteurs CSS plus complexes qui peuvent cibler des éléments spécifiques sans utiliser de classes ou d'identifiants supplémentaires, et de cette façon, nous pouvons également rendre notre code et nos styles plus flexibles .

Priorité CSS

Avant de plonger dans le domaine des sélecteurs CSS avancés, il est important de comprendre comment fonctionnent les priorités CSS afin que nous sachions comment utiliser nos sélecteurs de manière appropriée et éviter de perdre beaucoup de temps à déboguer quelque chose tant que nous prêtons attention aux priorités. pour résoudre le problème si

Lorsque nous écrivons du CSS, nous devons être conscients que certains sélecteurs seront plus hauts que d'autres sélecteurs dans la cascade. Le sélecteur que nous écrivons à la fin ne remplacera pas nécessairement les styles que nous avons écrits précédemment sur le même élément.

Alors comment calculer la priorité d'un sélecteur donné ? C'est assez simple si l'on considère que les priorités sont exprimées sous forme de quatre nombres séparés par des virgules, comme : 1, 1, 1, 1 ou 0, 2, 0, 1.

  1. Le premier chiffre (a) est généralement 0, sauf si l'attribut style est utilisé sur la balise ;
  2. Le deuxième nombre (b) est la somme du nombre d'identifiants sur le sélecteur ;
  3. Le troisième nombre (c) est le total des autres sélecteurs d'attributs et pseudo-classes utilisés sur ce sélecteur. Cela inclut la classe (.example) et le sélecteur d'attribut (tel que li[id=red]) ;
  4. Le quatrième nombre (d) compte les éléments (comme table, p, div, etc.) et les pseudo-éléments (comme : première ligne, etc.) ;
  5. Le sélecteur universel (*) a la priorité 0 ;
  6. Si deux sélecteurs ont la même priorité, le dernier de la feuille de style prend effet.

Regardons quelques exemples pour que ce soit plus facile à comprendre :

  • #barre latérale h2 — 0, 1, 0, 1
  • h2.titre — 0, 0, 1, 1
  • h2 + p — 0, 0, 0, 2
  • #sidebar p:première ligne — 0, 1, 0, 2

Dans l'exemple ci-dessous, le premier fonctionnera car il a une priorité plus élevée que le second :

  • #sidebar p#first { couleur : rouge } — 0, 2, 0, 1
  • #sidebar p:première ligne { couleur : bleu } — 0, 1, 0, 2

Il est important d'avoir au moins une compréhension de base du fonctionnement des priorités, mais certains outils comme Firebug, lorsque nous inspectons un élément spécifique, répertorient toutes les paires de sélecteurs CSS par ordre de priorité de sélecteur pour nous indiquer laquelle se trouve sur un élément spécifique. est utile pour que les sélecteurs soient valides.

Cela vous permet de voir très facilement quel sélecteur agit sur un élément.

Articles utiles :

Articles connexes