样式的顺序重要吗？

【问题标题】：does the order of styles matter?样式的顺序重要吗？
【发布时间】：2010-08-26 06:30:04
【问题描述】：

下面是我的标记。当我将鼠标移到超链接上时，它们会加下划线并变成红色。但是如果我交换最后两条规则的顺序，超链接仍然会加下划线，但它们的颜色会变为黑色而不是红色。这是设计使然吗？如果有，规则是如何应用的？

谢谢！康斯坦丁


<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>
    <style type="text/css" media="all">
        .menu a
        {
            text-decoration: none;
        }
        .menu li:hover a
        {
            color: black;
        }
        .menu li a:hover
        {
            color: red;
            text-decoration: underline;
        }
    </style>
</head>
<body>
    <div class="menu">
        <ul>
            <li><a href="#">item0</a></li>
            <li><a href="#">item1</a></li>
        </ul>
    </div>
</body>
</html>

【问题讨论】：

在旁注中，我不确定您为什么在这种情况下包含 li:hover a 规则。在这种情况下，您可能希望删除 :hover。
这是一个简化的例子，我有一个带有子菜单的菜单，所以这只是一个 sn-p。

标签： css css-selectors

【解决方案1】：

如果规则的特异性相同（在这种情况下它们是相同的），则各个规则将被覆盖按照它们在 CSS 中定义的顺序，因此在您的示例中红色获胜，因为它稍后出现在 CSS 定义中。同样的规则也适用于其他情况，例如：

<div class="red green">

其中哪一个获胜？

.green { color: green; }
.red { color: red; }

.red 在这里获胜，class 属性中的顺序无关紧要，重要的是样式在 CSS 本身中定义的顺序。

【讨论】：

谢谢，我猜他们的平等是问题所在。如果用户将鼠标悬停在
上，我会尝试使超链接变黑，此外，如果用户悬停在上，我会加下划线并变红。 .menu li:hover a:hover 之类的规则似乎有效，但它不适用于 IE6。好吧，我正在为 IE6 使用“whatever:hover”脚本 (xs4all.nl/~peterned/csshover.html)，但该脚本不支持这样的结构...

@akonsu - IE6 不喜欢 :hover 伪选择器，除了锚点，这就是为什么你会在那里看到奇怪的行为:)

【解决方案2】：

考虑以下 HTML。

<div class="red">
    Some red text...
</div>

还有这个 CSS..

.red {color: red}
.red {color: blue}
.red {color: yellow}

你猜对了，文字是黄色的！

【讨论】：

【解决方案3】：

是的，顺序很重要，在这种情况下，这不是真正的顺序，这就是为什么不管顺序如何，您都会得到相同的结果。

.menu li:hover a 应用于li，它是a 的父级，悬停不应用于a，而是应用于li。

.menu li a:hover 应用于a。

无论顺序如何，.menu li a:hover 样式都将应用于a。

更好的处理方法是将hover 伪选择器仅应用于a 元素并在其上设置display: block，将height 和width 设置为100%。这将填满整个LI

希望这可以澄清事情。

【讨论】：

我不明白你在说什么...请澄清
Dustin，我很想知道你所说的是否能达到另一个预期的效果：悬停时让li 的整行亮起，但它似乎不起作用：@987654321 @——有什么想法吗？
查看我的revision。您可以看到您需要将鼠标悬停在a 而不是li。另外大部分样式需要应用到a。 SO 是一个多么棒的网站，2 年多来，这篇文章仍然可以帮助某人。更别提复活了！

【解决方案4】：

是的，确实如此。 cascading order 的最后一点是：

最后，按指定的顺序排序：如果两个声明具有相同的权重、来源和特异性，则指定的后者获胜。导入样式表中的声明被认为在样式表本身的任何声明之前。

【讨论】：

【解决方案5】：

如果 CSS 规则具有相同的特性，则按顺序应用它们。在你的情况下，他们这样做，所以顺序很重要。

按照您在问题中的顺序，规则适用text-decoration: none。第二条和第三条规则导致将鼠标悬停在链接上以按顺序修改这两种样式，因为a 标记位于li 标记内。首先，颜色变黑；然后，颜色变为红色并出现下划线。

将最后两条规则的顺序颠倒如下：

    .menu a
    {
        text-decoration: none;
    }
    .menu li a:hover
    {
        color: red;
        text-decoration: underline;
    }
    .menu li:hover a
    {
        color: black;
    }

现在，text-decoration: none 像以前一样被应用。然后，在鼠标悬停时，第一条规则将颜色变为红色并添加下划线，然后颜色变为黑色。

【讨论】：