CSS覆盖规则和特异性
我经常被CSS覆盖规则弄糊涂了：一般来说，我认识到更具体的样式表会覆盖不太具体的样式表，而具体取决于指定多less个select器。 还有!important关键字，也起到一定的作用。
所以，这里有一个简单的例子：我有一个有两个表格单元格的表格。 该表本身具有适用于表格内所有单元格的CSS规则。 但是，第二个表格单元格有自己的规则，应该覆盖常规表格规则：
<html> <head> <style type = "text/css"> table.rule1 tr td { background-color: #ff0000; } td.rule2 { background-color: #ffff00; } </style> </head> <body> <table class = "rule1"> <tr> <td>abc</td> </tr> <tr> <td class = "rule2">abc</td> </tr> </table> </body> </html>
但是…当我在浏览器中打开这个，我看到rule2不覆盖rule1 。 好的 – 所以我想我需要使rule2更“特定”，但我不能真正定义任何进一步的select器，因为我只是想将它应用到一个特定的表格单元格。 所以，我试着把! important ! important关键字，但这也不起作用。
如果我将文本节点包装在<div> ，我可以覆盖rule2 ，如：
<td class = "rule2"><div>abc</div></td>
…然后使CSS规则更具体：
td.rule2 div { background-color: #ffff00; !important }
这工作，但它不完全是我想要的。 首先，我想将规则应用于表格单元格 ，而不是DIV。 它rule1 ，因为你仍然可以看到rule1的背景色作为div的边框。
那么，我需要做什么来告诉CSS我希望rule2覆盖td元素的rule1 ？
为了给第二个规则更高的特异性，你总是可以使用第一个规则的一部分。 在这种情况下，我会从规则一添加table.rule1 tr并将其添加到规则二。
table.rule1 tr td { background-color: #ff0000; } table.rule1 tr td.rule2 { background-color: #ffff00; }
过了一会儿，我发现这很自然，但我知道有些人不同意。 对于这些人，我build议你调查一下LESS或SASS 。
特性是根据规则中的id，类和标签select器的数量来计算的。 Id具有最高的特异性，然后是类，然后标记。 你的第一条规则现在比第二条更具体，因为它们都有一个类select器，但是第一条也有两个标签select器。
为了使第二个覆盖第一个，可以通过添加父母的信息来更具体地说明：
table.rule1 tr td.rule2 { background-color: #ffff00; }
这里是一个很好的文章，更多关于select器优先级的信息。
重要的需要在里面;
td.rule2 div { background-color: #ffff00 !important; }
实际上我相信这应该重写它
td.rule2 { background-color: #ffff00 !important; }
