样式的顺序重要吗? [英] does the order of styles matter?
问题描述
以下是我的标记.当我将鼠标移到超链接上时，它们会带有下划线并变为红色.但是，如果我交换最后两个规则的顺序，则超链接仍会带有下划线，但是它们的颜色将变为黑色，而不是红色.这是设计使然吗?如果是这样，该规则如何应用?
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?
谢谢！ 康斯坦丁
<?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中定义的顺序被覆盖./strong>，因此在您的示例中红色获胜，因为它在CSS定义中排在后面.相同的规则也适用于其他情况，例如:
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:
<div class="red green">
其中哪些获胜?
.green { color: green; }
.red { color: red; }
.red在这里赢了，class属性中的顺序无关紧要，重要的是样式在CSS本身中定义的顺序.
.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.
这篇关于样式的顺序重要吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
