Css样式优先级 [英] Css style priority
本文介绍了Css样式优先级的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我遇到CSS声明优先级的问题。我的页面包含一个外部CSS文件，其中包含规则和一些内嵌的CSS声明，这些声明应该覆盖该规则。对我来说，内联样式声明应该重写外部CSS声明。但是，当我在Chrome中查看页面时，表的第二行显示为蓝色，应该按照内部样式声明中的定义显示为红色。
I am having problems with CSS declaration priority. My page contains an external CSS file with a rule and some inline CSS declarations, which are supposed to override that rule. To my understanding inline style declarations should override external CSS declarations. However, when I view the page in Chrome the second row of the table is displayed blue, when it should be displayed red as defined in the internal style declarations.
我缺少这里
这是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文件的内容：
Here is the content of the CSS file:
tbody tr:nth-child(even) td,
tbody tr.even td
{
background: #e5ecf9;
}
推荐答案
- 有一些css规则的优先级规则（取决于id，style，嵌套级别）
- 如果有两条规则具有相同的优先级，则较低的规则覆盖较高的规则
- ！重要的违规可能不会被覆盖
- 内联样式（样式属性）具有最高优先级
- CSS code in style tag and from external file works as if they in one file
- There some rules of priority of css rules (depends on id, style, nesting level)
- If there are 2 rules with the same priority then the lower one overwrites the higher one
- !important derictive may not be overwritten
- inline style (in style attribute) have heighest priority
您可以使用例如！important指令：
You may use for example !important directive:
td, tr, th {
background: Red !important;
}
这篇关于Css样式优先级的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
