下面是我的标记。当我将鼠标移到超链接上时,它们会带有下划线并变成红色。但如果我交换最后两条规则的顺序,超链接仍然会带有下划线,但它们的颜色会变为黑色而不是红色。这是设计使然吗?如果是这样,规则是如何应用的?
谢谢!
康斯坦丁
<?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 本身中定义的顺序。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)