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

<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>

I'm a CSS noob, but my intuition tells me that a.bar is a more specific match for the <span> containing TEXT than #foo, and that TEXT should appear in red with a yellow background. Or if #foo is more specific, then TEXT should be in blue with a cyan background.

我是一个CSS noob，但是我的直觉告诉我a。bar是一个比#foo包含文本的更特定的匹配项，文本应该以红色显示，背景为黄色。或者如果#foo更具体，那么文本应该是蓝色的，带有青色背景。

Instead, TEXT appears (as tested on Chrome, IE8) in red with a cyan background. How is it that a.bar is more specific than #foo, but #foo .baz is more specific than a.bar > .baz? How would I get this text to appear with red and ~~cyan~~ yellow with the least disruption (smallest set of changes) to the styles I have already specified?

相反，文本会以红色显示(如Chrome, IE8所测试的)，背景为青色。a怎么了?bar比#foo。但是#foo .baz比a更具体。酒吧> .baz ?我如何让这篇文章以红色和青色出现，并以最少的干扰(最小的更改集)来显示我已经指定的样式?

3 个解决方案

#1

What you're seeing with the text color doesn't have to do with which selector is applied. Both selectors are being applied, but to different elements. Translated to inline styles your CSS would look like:

你所看到的文本颜色与选择器的应用无关。两个选择器都被应用，但应用于不同的元素。翻译成内联样式，您的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; was overridden by the more specific selector, but your other selectors don't override each other. They apply to different elements. The span will inherit the color from it's closest ancestor which has a specified value for color. In this case that is the <a>.

背景颜色:黄色;被更特定的选择器重写，但是其他选择器不会相互重写。它们适用于不同的元素。span将继承其最近的祖先的颜色，该祖先具有指定的颜色值。在这种情况下，它是。

If you want a yellow background with minimal changes I would suggest making that selector have higher specificity by prepending #foo onto it like #foo a.bar > .baz. Here is a JSFiddle demo.

如果您想要一个具有最小变化的黄色背景，那么我建议您将该选择器添加到像#foo a那样的前缀#foo中，从而获得更高的特性。酒吧> .baz。这是一个JSFiddle演示程序。

#2

This is all down to specificity. Here is a good (old) resource (checkout the jpg you can download)

这都是由于特异性。这里有一个很好的(旧的)资源(查看可以下载的jpg)

#3

It's quite messy; it's supposed to be intuitive, but once you dig deeper, things might not work quite as expected. Smashing Magazine has put together a comprehensive guide, though: http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/

很混乱的;它应该是直觉的，但是一旦你深入挖掘，事情可能不会像预期的那么顺利。不过，《Smashing》杂志已经推出了一个全面的指南:http://coding.smashingmagazine.com/2007/07/27/css-specific things-you should-know/

#1