CSS继承中断了吗？

Question

我有嵌套的列表，在li标记中有链接。在嵌套级别x上，我想更改链接的外观。下面是一些示例代码：

CSS：

.blue a { color: blue; }
.red a { color: red; }

HTML：

    <ul>
    <li class="blue"><a href="#">blue-1</a></li>
    <li class="red"><a href="#">red-1</a></li>
    <li class="blue"><a href="#">blue-2</a>
        <ul>
            <li>
                <a href="#">blue-3</a>
                <ul>
                    <li class="red">
                        <a href="#">red-2</a>
                        <ul>
                            <li><a href="#">red-3</a></li>
                            <li><a href="#">red-4</a></li>
                        </ul>
                    </li>
                    <li><a href="#">blue-4</a></li>
                </ul>
            </li>
            <li class=""><a href="#">blue-5</a></li>
        </ul>
    </li>
    <li class="red"><a href="#">red-5</a>
        <ul>
            <li><a href="#">red-6</a></li>
            <li><a href="#">red-7</a></li>
        </ul>
    </li>
</ul>

通过这种方式，它可以像预期的那样工作。文本为红色-*的链接为红色。但是当我更改CSS类的顺序时，它不再起作用：

.red a { color: red; }
.blue a { color: blue; }

为什么会出现这种行为？难道不应该是一样的吗？我必须使用比红色和蓝色更多的颜色，所以在CSS中给出正确的顺序是不可能的。

Answer 1

Css选择器优先级根据其具体程度进行设置：

• every tag被算作1
• E29>作为E11010点
• 事件id作为100点

您得到的两个选择器具有相同的优先级，因此在代码中进一步设置的选择器将覆盖先前的选择器。

Answer 2

这样做的原因是，在css中，您将告诉每个 a标记，这些标记是名为blue的类的子类、孙类等元素。当您告诉名为red的类的子类、孙类等元素的每个a标记都应该是红色时，这就被覆盖了。

因此，不是这样做(影响所有链接标签)

.blue a { color: blue; }
.red a { color: red; }

您可以这样做(如果是链接标记，则只影响第一个子项)：

.red > a,
.red > ul > li > a{ color: red; }
.blue > a,
.blue > ul > li > a { color: blue; }

第二行的作用是查找类名为red的所有元素。然后，它查找所有直接的子ul元素。在这些匹配的元素下，它会查找所有具有直接子li元素的直接子a元素。与这些相匹配，它最终添加了样式。

JSFiddle:

http://jsfiddle.net/Y9jFr/