CSS规则中选择器的优先级 [英] Priority of Selector in CSS Rules
问题描述
让我首先展示示例代码
<！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（奇数）{
background-color：＃F0FFE2;
}
.cell {
height：5ex;
width：5em;
背景颜色：＃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>
我期望的结果：表格列用两种颜色着色，
代码实际做了什么：表格列用两种颜色着色，
我猜测 .cell 和 #tbl td code>比 #tbl tr 更具体，这就是悬停风格被忽略的原因，但我不知道如何解决，请帮助。谢谢。
#id selector = 100points
.class 和：伪类选择器= 10分
在您的具体情况下，诀窍：
#tbl td：nth-child（奇数）{
background-color：＃F0FFE2;
}
#tbl tr：hover td.cell {
background-color：＃FFA270;
}
Let me show the 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 I expect: The table column is colored by two colors, when mouse hover a cell, the whole row was highlighted with orange.
What the code actually did: The table column is colored by two colors, nothing happened when hovering.
I guess the .cell and #tbl td is more specific than #tbl tr, that's why the hover style was ignored, but I don't know how to fix it, please help. Thanks.
You should take a deeper look at specificity: http://www.standardista.com/css3/css-specificity/
#id selector = 100 "points"
.class and :pseudo-class selectors = 10 "points"
In your specific case, this will do the trick:
#tbl td:nth-child(odd){
background-color:#F0FFE2;
}
#tbl tr:hover td.cell {
background-color:#FFA270;
}
这篇关于CSS规则中选择器的优先级的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
