0

我有嵌套列表，其中包含 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 中给出正确的顺序。

4

2 回答 2

4

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

  • 每个标签计为1分
  • 每节课10分_
  • 事件ID为100分

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

于 2012-07-06T08:48:12.057 回答
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/

于 2012-07-06T08:43:25.397 回答