Jar*_*rgo 5 html css css-selectors
我遇到CSS声明优先级问题.我的页面包含一个带有规则和一些内联CSS声明的外部CSS文件,它们应该覆盖该规则.据我所知,内联样式声明应覆盖外部CSS声明.但是,当我在Chrome中查看页面时,表格的第二行显示为蓝色,当它应显示为内部样式声明中定义的红色.
我在这里想念的是什么
这是HTML:
<html>
<head>
<link rel="stylesheet" href="screen.css" type="text/css" media="screen, projection">
<style type="text/css">
td,tr,th
{
background: Red;
}
</style>
</head>
<body>
<table>
<tr>
<td>11</td>
<td>22</td>
</tr>
<tr>
<td>aa</td>
<td>bb</td>
</tr>
</table>
</body>
</html>
以下是CSS文件的内容:
tbody tr:nth-child(even) td,
tbody tr.even td
{
background: #e5ecf9;
}
and*_*dyb 15
在计算哪个规则具有最高特异性时,选择器的数量很重要.
CSS特异性的两个优秀可视化是http://www.standardista.com/css3/css-specificity/和http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html
您应该避免仅仅!important依靠规则来覆盖(请参阅在CSS中使用"!important"的含义是什么？)而是更改选择器以使您的规则对导入的规则具有更多或相等的权重.
例如,以下将生成所有单元格 background:red
thead tr:nth-child(1n) th, tbody tr:nth-child(1n) td {
background:red;
}
| 归档时间： |
|
| 查看次数： |
24912 次 |
| 最近记录： |