4 
<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#fooTEXT#fooTEXT

而是TEXT以红色和青色背景显示（在 Chrome、IE8 上测试）。为什么a.bar比 更具体#foo，但又#foo .baz比 更具体a.bar > .baz？我怎样才能让这个文本以红色和青色黄色出现，并且对我已经指定的样式的干扰最少（最小的更改集）？

4

3 回答 3

3

您所看到的文本颜色与应用的选择器无关。两个选择器都被应用，但应用于不同的元素。转换为内联样式，您的 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 演示。

于 2012-06-11T23:45:55.243 回答
1

这完全取决于特异性。这是一个很好的（旧）资源（查看可以下载的 jpg）

于 2012-06-11T23:43:47.337 回答
1

这很混乱；它应该是直观的，但是一旦你深入挖掘，事情可能不会像预期的那样工作。不过，Smashing Magazine 已经整理了一份综合指南：http: //coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/

于 2012-06-11T23:44:32.773 回答