Quelles sont les priorités parmi les sélecteurs CSS

Question

Question CSS: si deux sélecteurs différents s’appliquent à un élément, qui gagne?

Je sais que cela ne devrait pas arriver, mais je souhaite modifier une application héritée, et le CSS se positionne au milieu.

Answer 1

Les détails sanglants dans la spécification sont en réalité assez lisibles. En résumé:

Les règles

1. ! important et les règles de style intégrées gagnent le plus.

2. Sinon, normalement, le plus spécifique gagne. #id est un sélecteur plus spécifique que . nom_classe est un sélecteur plus spécifique que tagname .

3. Lorsque les règles sont également spécifiques, celle déclarée en dernier gagne.

Il n’existe aucune raison particulière pour que cela ne se produise pas. Il est normal de spécifier une règle de type pinceau large, puis d'ajouter une règle plus spécifique pour cibler un cas; Plusieurs règles de même propriété sur un même élément ne sont ni inhabituelles ni indésirables.

Answer 2

vous devez trouver #no d'id = A, # no de class = B et #no de tag = c dans le sélecteur

ABC avec une valeur plus élevée gagne.

.wrapper .title  p {  
  //some other rules
}

A=0 B=2 C=1 =021

\#foo {
  // some more rules
}

A=1 = 100

.bar .head div li{
  // some more rules
}


A=0 B=2 C=2 =022

100> 022 <021

donc #foo gagne

Answer 3

Cela devrait arriver! C'est pourquoi on l'appelle les feuilles de style CASCADING. Vous pouvez trouver un exemple des priorités ici

Answer 4

Voir la section ordre de spécificité de la spécification (avec le reste de ce chapitre sous forme de règles! importantes et l'ordre dans lequel les règles apparaissent dans la feuille de style ont également un impact).

Answer 5

" # id " est plus puissant que " .class " nom et " .class " est plus puissant que & tag; tag " prénom. Mais si nous appliquons "! Important " que sa priorité est la plupart d'entre eux.

• ! important
• style en ligne
• id
• classe
• balise

Answer 6

La priorité entre les sélecteurs dépend de leur spécificité. Des sélecteurs plus spécifiques gagnent moins que spécifiques.

Si deux sélecteurs sont également spécifiques, le dernier remporte le premier.

Il existe trois niveaux de spécificité, id, classe et élément. Ainsi, #elem l'emporte sur .elem car un identifiant est plus spécifique. .elem .cont l'emporte sur .elem car il possède plus de sélecteurs au même niveau.

Lire la suite sous "Que se passe-t-il en cas de conflit?" sur la Selectutorial .

Answer 7

L'ordre dans le fichier CSS n'a d'importance que si les sélecteurs partagent la même spécificité.

Pour en savoir plus sur la spécificité du sélecteur: Andy Clarke a écrit Specificity Wars, qui donne le meilleur aperçu de son fonctionnement.

Answer 8

CSS signifie Cascading les feuilles de style. Cela signifie que les règles s'appliquent aux éléments de manière cascadée. Il est parfaitement normal que différents sélecteurs s'appliquent à un élément. Pense, par exemple, à ce qui suit:

<div class="wrapper">
  <div id="foo" class="bar" style="some rules">Test</div>
</div>

Les règles suivantes affectent le " foo " élément:

.wrapper {
  //some other rules
}

#foo {
  // some more rules
}

.bar {
  // some more rules
}

Vous pouvez trouver les règles relatives aux priorités ici .

Je conseille toujours d'utiliser le plug-in "firebug" de Firefox. Il vous montrera exactement quelles propriétés sont évaluées pour un élément spécifique et pourquoi, en soulignant les remplacements lors de la cascade.

Answer 9

1. ! important
2. style en ligne
3. #id
4. classe
5. tags