Question

<html><head><style type="text/css">
    #foo  { color: blue; }
    a.bar { color: red; }
    #foo .baz  { background-color: cyan; }
    a.bar > .baz { background-color: yellow; }
</style></head>
<body>
    <div id="foo">
        <a href="#" class="bar">
            <span class="baz">TEXT</span>
        </a>
    </div>
</body>
</html>

我是一个CSS菜鸟，但我的直觉告诉我，a.bar是<span>包含TEXT而非#foo的更具体的匹配，而TEXT 1}}应显示为红色，背景为黄色。或者，如果#foo更具体，则TEXT应为蓝色，背景为青色。

相反，TEXT以红色背景显示（在Chrome，IE8上进行测试）。 a.bar如何比#foo更具体，但#foo .baz比a.bar > .baz更具体？如何使用红色和青色黄色显示此文本，并且对我已指定的样式进行最少的中断（最小的更改集）？

Answer 1

您使用文本颜色看到的内容与应用哪个选择器无关。两种选择器都在应用，但适用于不同的元素。转换为CSS的内联样式：

<body>
    <div id="foo" style="color: blue;">
        <a href="#" class="bar" style="color: red;">
            <span class="baz" style="background-color: cyan;">TEXT</span>
        </a>
    </div>
</body>

background-color: yellow;被更具体的选择器覆盖，但您的其他选择器不会互相覆盖。它们适用于不同的元素。该范围将从其最近的祖先继承color，该祖先具有color的指定值。在这种情况下，这是<a>。

如果你想要一个只有极少变化的黄色背景，我建议通过在#foo之前加#foo a.bar > .baz来使选择器具有更高的特异性。这是JSFiddle demo。

Answer 2

这完全取决于特异性。 Here is a good (old) resource（查看可以下载的jpg）

Answer 3

这很乱;它应该是直观的，但是一旦你深入挖掘，事情可能无法按预期工作。 Smashing Magazine汇集了一份综合指南，但： http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/

需要帮助理解CSS选择性规则

3 个答案: