微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

css – 样式的顺序是否重要?

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

谢谢!
康斯坦丁

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

解决方法

如果规则在特定性上是相等的(在这种情况下,它们是),则单个规则将以CSS中定义的顺序被覆盖,因此在您的示例中,红色获胜是因为它在CSS定义中出现。其他情况也适用同样的规则,例如:
<div class="red green">

哪些胜利?

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

.red在这里,在class属性中的顺序并不重要,所有重要的是样式在CSS本身中定义的顺序。

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。