样式的顺序重要吗?

below is my markup. when i move the mouse over the hyperlinks they get underlined and turn red. but if i swap the order of the last two rules, the hyperlinks still get underlined, but their color changes to black rather than red. is this by design? if so, how are the rules applied?

下面是我的标记。当我把鼠标移到超链接上时，它们会被下划线，然后变成红色。但是如果我交换最后两个规则的顺序，超链接仍然会得到下划线，但是它们的颜色会变成黑色而不是红色。这是通过设计吗?如果是，这些规则是如何应用的?

thanks! konstantin

谢谢!康斯坦丁


<?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>

5 个解决方案

#1

If the rules are equal in specificity (in this case they are), individual rules get overridden in the order they're defined in the CSS, so in your example red wins because it comes later in the CSS definitions. The same rule applies in other cases as well, for example:

如果规则在特性上是相同的(在本例中是这样)，那么在CSS中定义的规则就会被重写，所以在您的例子中红色会胜出，因为它稍后会出现在CSS定义中。同样的规则也适用于其他情况，例如:

<div class="red green">

Which of these wins?

哪一个赢了?

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

.red wins here, it doesn't matter the order in the class attribute, all that matters is the order the styles are defined in the CSS itself.

。red在这里胜出，它与class属性的顺序无关，重要的是样式在CSS中定义的顺序。

#2

Consider the following HTML.

考虑下面的HTML。

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

And this CSS..

这个CSS。

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

You guessed it, the text will be yellow!

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

#3

Yes the order matters, and in this case it is not really the order which is why you are having the same result regardless of the order.

是的，顺序很重要，在这种情况下不是顺序，这就是为什么不管顺序，结果都是一样的。

The .menu li:hover a is applied to the li, which is a parent of the a and the hover is not applied to the a it is applied to the li.

菜单李:悬停a应用于li，它是a的父元素，悬停不应用于它应用于li的a。

The .menu li a:hover is applied to the a.

li a:hover应用于a。

Regardless of the order the .menu li a:hover style will be applied to the a.

无论点什么菜，菜单li:鼠标悬停样式都会被应用到菜单上。

The better way to handle that is to have the hover pseudo selector applied to only the a element and make set display: block on it, with height and width set to 100%. This will fill the entire LI

更好的处理方法是让悬浮伪选择器只应用于a元素并在其上设置set display: block，高度和宽度设置为100%。这将填满整个李

Hope this clarifies things.

希望这个澄清的事情。

#4

Yes, it does. The last point of the cascading order reads:

是的,确实。级联顺序的最后一点是:

Finally, sort by order specified: if two declarations have the same weight, origin and specificity, the latter specified wins. Declarations in imported style sheets are considered to be before any declarations in the style sheet itself.

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

#5

CSS rules are applied in order if they have the same specificity. In your case, they do, so order matters.

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

With the order you have in your question, the rules apply text-decoration: none. The second and third rules causes hovering the mouse over the link to modify those two styles in order because the a tag is inside the li tag. First, the color turns black; then, the color turns red and the underline appears.

根据你问题中的顺序，规则适用于文本修饰:无。第二个和第三个规则导致鼠标悬停在链接上，以修改这两种样式，因为a标记在li标记中。首先，颜色变黑;然后，颜色变红，下划线出现。

Reverse the order of the last two rules like so:

颠倒最后两个规则的顺序:

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

Now, the text-decoration: none gets applied as before. Then, upon mouse-over, the first rule changes the color to red and adds an underline, followed by the color changing to black.

现在，文本装饰:没有一个像以前一样被应用。然后，在鼠标经过时，第一个规则将颜色更改为红色，并添加下划线，然后将颜色改为黑色。

#1

<div class="red green">