html - Priority of Selector in CSS Rules -
let me show sample code first
<!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> what expect: table column colored 2 colors, when mouse hover cell, whole row highlighted orange.
what code did: table column colored 2 colors, nothing happened when hovering.
i guess .cell , #tbl td more specific #tbl tr, that's why hover style ignored, don't know how fix it, please help. thanks.
you should take deeper @ specificity: http://www.standardista.com/css3/css-specificity/
#id selector = 100 "points"
.class , :pseudo-class selectors = 10 "points"
in specific case, trick:
#tbl td:nth-child(odd){ background-color:#f0ffe2; } #tbl tr:hover td.cell { background-color:#ffa270; }
Comments
Post a Comment