Bonjour,

Voici du code qui affiche un tableau dont les lignes changent de couleur au survol. (utilité du code en orange : voir plus bas)

Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<style>
    #page tr:hover{
        background-color: red;
    }
    tr.noHoverTr:hover{
        background-color: blue;
    } 
    table.noHover tr:hover{
        background-color: green;
    }
</style>

<div id="page">
    <table class="noHover">
        <tr class="noHoverTr">
            <td>1|1</td>
            <td>1|2</td>
        </tr>
        <tr>
            <td>2|1</td>
            <td>2|2</td>
        </tr>
    </table>
</div>
J'ai essayé, avec le code orange, de modifier la couleur de ligne survolée mais ce que je rajoute ne prends jamais le dessus par rapport au code css qui n'est pas en orange.

Si on exécute le code (la partie en orange aussi), on remarque que la ligne survolée est rouge.

Pourquoi est-ce que je ne peux pas "surcharger" le code css qui n'est pas en orange ?
Remarquez que si on enlève le #page par contre là mon code en orange prend le dessus.


Résolu : un sélecteur qui commence par une "référence vers un div" (à savoir "#leDiv ..." est prioritaire par rapport a un sélecteur du genre de ceux que j'ai écris en orange. (Calculating a selector's specificity)

Pour modifier la couleur de la ligne survolée, j'ai cette solution :
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<style>
    #page tr:hover{
        background-color: red;
    }
    #hoverBleu tr:hover{
        background-color: blue;
    }
</style>
 
<div id="page">
 
    <table id="hoverBleu">
        <tr>
            <td>1|1</td>
            <td>1|2</td>
        </tr>
        <tr>
            <td>2|1</td>
            <td>2|2</td>
        </tr>
    </table>
</div>

D'avance merci.