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>

这样它就按预期工作了。带有文本 red-* 的链接为红色。但是当我改变 CSS 类的顺序时，它就不再起作用了:

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

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

Answer 1

Css 选择器的优先级是根据它的具体程度来设置的:

• 每个标签都计为1点
• 每类为10分
• 事件 id 为 100 积分

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