priorité de sélection dans les règles CSS

Permettez-moi de montrer l'exemple de code premierpriorité de sélection dans les règles CSS

<!DOCTYPE HTML> 
<html lang="en-US"> 
<head> 
    <meta charset="UTF-8"> 
    <title>css test</title> 
    <style type="text/css"> 
     #tbl tr:hover{ 
      background-color:#FFA270 !important; 
     } 
     #tbl td:nth-child(odd){ 
      background-color:#F0FFE2; 
     } 
     .cell{ 
      height:5ex; 
      width:5em; 
      background-color: #E2F1FF; 
      text-align:center; 
     } 
    </style> 
</head> 
<body> 
    <table id="tbl"> 
     <tr> 
      <td class="cell">001</td> 
      <td class="cell">002</td> 
      <td class="cell">003</td> 
      <td class="cell">004</td> 
     </tr> 
     <tr> 
      <td class="cell">001</td> 
      <td class="cell">002</td> 
      <td class="cell">003</td> 
      <td class="cell">004</td> 
     </tr> 
     <tr> 
      <td class="cell">001</td> 
      <td class="cell">002</td> 
      <td class="cell">003</td> 
      <td class="cell">004</td> 
     </tr> 
     <tr> 
      <td class="cell">001</td> 
      <td class="cell">002</td> 
      <td class="cell">003</td> 
      <td class="cell">004</td> 
     </tr> 
    </table> 
</body> 
</html>

Ce que j'attends: La colonne de table est colorée par deux couleurs, lorsque la souris hover une cellule, toute la ligne a été mis en évidence avec Orange.

Ce que le code a effectivement fait: La colonne de la table est colorée par deux couleurs, rien ne s'est passé en survol.

Je suppose que le .cell et #tbl td est plus spécifique que #tbl tr, c'est pourquoi le style de vol stationnaire a été ignoré, mais je ne sais pas comment le résoudre, s'il vous plaît aider. Merci.

Source

2013-05-20 Byzod

Travailler avec 'tr' n'est pas bon. Au lieu de cela, utilisez 'td'. De même, vos sélecteurs doivent pointer vers le même 'element' pour comparer leur priorité. –

@NOX merci pour le conseil, maintenant je sais où j'avais tort – Byzod

Possible copie de [Quelqu'un peut-il expliquer pourquoi le "nth-child" -selector a une priorité plus élevée que "hover"?] (Http://stackoverflow.com/questions/13055578/can-quelqu'un-expliquer-pourquoi-le-nième-enfant-sélecteur-a-une-priorité-supérieure-à-hov) – cfi

Vous devriez jeter un regard plus profond sur la spécificité: http://www.standardista.com/css3/css-specificity/

#id sélecteur = 100 "points"

.class et :pseudo-class sélecteurs = 10 "points"

Dans votre cas, cela faire l'affaire:

#tbl td:nth-child(odd){ 
    background-color:#F0FFE2; 
} 
#tbl tr:hover td.cell { 
    background-color:#FFA270; 
}

Source

2013-05-20 09:45:17 Giona

Merci pour votre réponse et le lien! Je pense que '#tbl tr: hover .cell' et' #tbl tr: hover td' fonctionne de la même façon, mais '#tbl tr: hover .cell' devrait être plus rapide – Byzod

En passant,' #tbl tr: hover .cell 'a une spécificité totale de 111 (1 id + 1 pseudo-classe + 1 sélecteur d'élément) alors que' #tbl tr: hover .cell' "vaut" 121 (1 id + 1 class + 1 pseudo-classe + 1 sélecteur d'élément – Giona

Évitez de mélanger les termes pseudo-classe et pseudo-élément, en particulier lorsque vous parlez de spécificité, car chacun a des valeurs de spécificité différentes! – BoltClock

priorité de sélection dans les règles CSS

Répondre

Questions connexes