Question

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

谢谢！康斯坦丁


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

Answer 1

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

<div class="red green">

其中哪些获胜？

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

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

Answer 2

请考虑以下HTML。

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

这个CSS ..

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

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

Answer 3

是的，订单很重要，在这种情况下，不管顺序如何，这都不是订单的原因。

.menu li:hover a已应用于li，a是a的父级，而悬停未应用于li，.menu li a:hover会应用于a 1}}。

.menu li a:hover已应用于a。

无论订单如何，hover样式都将应用于a。

更好的方法是将display: block伪选择器仅应用于height元素，并使用width和{{LI对其进行设置{{1}} 1}}设置为100％。这将填满整个{{1}}

希望这能澄清事情。

Answer 4

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

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

Answer 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像以前一样被应用。然后，在鼠标悬停时，第一个规则将颜色更改为红色并添加下划线，然后将颜色更改为黑色。

风格的顺序是否重要？

5 个答案: