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选择器优先级根据具体的具体情况设置：

每个标记都计为 1 点
每个类为 10 点
活动 ID 为 100 积分

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

Answer 2

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

所以不要这样做（影响所有链接标签）

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

CSS继承坏了吗？

2 个答案: