CSS优先级 [英] CSS precedence

问题描述

我的网页包含：

<link href="/Content/Site.css" rel="stylesheet" type="text/css" />
<style type="text/css">
td {
    padding-left:10px;
} 
</style>

引用样式表包含：

.rightColumn * {margin: 0; padding: 0;}

我在右栏中有一个表 ID，我想让单元格有一点点填充。但是，引用的样式表优先于内联样式。我看到这一点，也通过Firebug。如果我关闭Firebug中的 padding：0 指令，则padding-left会生效。

I have a table in the rightcolumn ID where I want the cells to have a little padding. However, the referenced stylesheet is taking precedence over the inline styling. I see this visually and also via Firebug. If I turn off the padding:0 instruction in Firebug, the padding-left takes effect.

获得 padding-left 才能工作？

推荐答案

，你有一个特异性问题。当确定两个规则中的哪一个应该优先时，CSS引擎计算每个选择器中的 #id 的数量。如果有一个比另一个，它的使用。否则，它以同样的方式继续比较 .class es和标签。

As others have mentioned, you have a specificity problem. When determining which of two rules should take precedence, the CSS engine counts the number of #ids in each selector. If one has more than the other, it's used. Otherwise, it continues comparing .classes and tags in the same way. Here, you have a class on the stylesheet rule, but not on the inline rule, so the stylesheet takes precedence.

您可以使用来覆盖此类型的规则， ！important ，但是这是一个非常大的锤子在这里使用。你最好改进内联规则的特异性。根据你的描述，它听起来像你的 .rightColumn 元素是或包含一个表，你想要该表中的单元格是否有额外的空格？如果是，您要查找的选择器是 .rightColumn td ，它比样式表规则更具体，并且将优先。

You can override this with !important, but that's an awfully big hammer to be using here. You're better off improving the specificity of your inline rule. Based on your description, it sounds like your .rightColumn element either is or contains a table and you'd like the cells in that table to have extra spacing? If so, the selector you're looking for is ".rightColumn td", which is more specific than the stylesheet rule and will take precedence.

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