html - 这些样式如何级联？

Question

问题可在此链接中查看。 http://dansdemos.info/prototypes/htmlSamples/responsive/step08_megaGridForward.html

这三个框需要有绿色背景，但另一种风格优先。我认为样式应该根据它们在样式表中出现的位置优先，样式表中较低的样式级联(优先)在样式表中较高的样式。我猜这是错误的，因为这些框的背景颜色的样式表在这里:

    #maincontent .col {
    background: #ccc;
    background: rgba(204, 204, 204, 0.85);

}

#callout1   {
    background-color: #00B300;
    text-align:center;
}
#callout2   {
    background-color: #00CC00;
    text-align:center;
}
#callout3   {
    background-color: #00E600;
    text-align:center;
}

当“#maincontent .col”的样式被移除时，绿色出现(链接)http://dansdemos.info/prototypes/htmlSamples/responsive/step08_megaGridForwardGreen.html ，但我认为应该显示绿色，因为它位于更高层指定的灰色之后。

我正在寻找一种方法来获得我需要的东西，但如果我理解为什么背景是灰色而不是绿色，那真的会让事情变得容易得多。

如有任何帮助，我们将不胜感激。谢谢。

Answer 1

CSS中的“级联”是指样式的特殊性。

所有的事情都一样，样式在 CSS 中出现在后面胜过那些在前面。

但是还有其他方法可以提高特异性——即您在引用元素时的“特异性”程度。

例如，这个:

table.myClass {style}

比更具体:

table {style}

因此，即使我可能会这样排序，但在使用该特定类的任何 table 上，第一种样式会胜过第二种样式。

在你的例子中，#yourID .col 比#anotherID 更具体

如何计算特异性可能有点棘手。 Here's but one explanation和 another explanation .

在您的情况下，具体而言，“ID + 子类”胜过“ID”。