CSS规则不被覆盖 [英] CSS rule not being overridden

问题描述

我遇到了一个奇怪的问题，其中CSS规则似乎未正确应用于Mac上的Safari / Chrome / Firefox。代码：

 < table id =tableborder =1> 
< tr> 
< td id =cell> 
 Hello 
< / td> 
< / tr> 
< / table> 
  

然后下面的css代码按照我的预期工作（因为单元格中没有padding ）：

  td {padding：10px; } 
 #cell {padding-top：0px; } 
  

但这不会：

< pre class =lang-css prettyprint-override> #table td {padding：10px; }
#cell {padding-top：0px; }


（在线试用： http://jsfiddle.net/xkduyk7m/ ）

我希望两个版本的CSS产生相同在这种情况下，但在第二种情况下，稍后添加并应用于特定单元格的规则不会覆盖第一条规则。

为什么？ p>

解决方案

每个css选择器都有一个值weight。

这里是W3的关于如何计算优先级的文档： http://www.w3.org/TR/CSS2/cascade.html#specificity a>

I ran into a weird issue, where a CSS rule doesn't seem to be applied correctly on Safari/Chrome/Firefox on Mac.

Given the following html code:

<table id="table" border="1">
    <tr>
        <td id="cell">
            Hello
        </td>
    </tr>
</table>

Then the following css code works as I expected (as in the cell doesn't have padding on top):

td { padding: 10px; }
#cell { padding-top: 0px; }

But this one doesn't:

#table td { padding: 10px; }
#cell { padding-top: 0px; }

(Try it out online at: http://jsfiddle.net/xkduyk7m/)

I expected both versions of the CSS to yield the same effect in this case, but in the second case the rule that is added later and that applies to the specific cell doesn't override the first rule.

Why?

解决方案

Each css selector has a value "weight". The combination makes it override one another, and when they match, the order of writing will define the precedence.

Here are W3's docs about how to calculate the precedence: http://www.w3.org/TR/CSS2/cascade.html#specificity

这篇关于CSS规则不被覆盖的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！