ako*_*nsu 28 css css-selectors
下面是我的标记.当我将鼠标移到超链接上时,它们会加下划线并变为红色.但如果我交换最后两个规则的顺序,超链接仍然加下划线,但它们的颜色变为黑色而不是红色.这是设计的吗？若然,该规则如何适用？
谢谢!康斯坦丁
<?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>
Nic*_*ver 50
如果规则在特定性上相同(在这种情况下它们是),则各个规则将按照它们在CSS中定义的顺序被覆盖,因此在您的示例中,红色获胜,因为它稍后出现在CSS定义中.同样的规则也适用于其他情况,例如:
<div class="red green">
以下哪些胜利？
.green { color: green; }
.red { color: red; }
.red在这里获胜,class属性中的顺序无关紧要,重要的是CSS本身定义样式的顺序.
请考虑以下HTML.
<div class="red">
Some red text...
</div>
这个CSS ..
.red {color: red}
.red {color: blue}
.red {color: yellow}
你猜对了,文字会是黄色的!
是的,订单很重要,在这种情况下,不管顺序如何,这都不是订单的原因.
将.menu li:hover a被施加到li,这是的父a和悬停不施加到a它被施加到li.
将.menu li a:hover被施加到a.
无论.menu li a:hover样式的顺序如何a.
处理它的更好方法是将hover伪选择器仅应用于a元素并对其进行设置display: block,height并width设置为100%.这将填补整个LI
希望这能澄清事情.
| 归档时间： |
|
| 查看次数： |
16845 次 |
| 最近记录： |