无法找到我一直想知道的答案.
有没有之间的差异.class2 a:hover {}和.class2:hover a {}?或者偏爱一个而不是另一个?
我一直.class2 a:hover {}用来改变锚悬停上的锚点(即:锚文本颜色),但是当我想改变持有锚点的div时(即:锚点颜色和div背景颜色都在悬停时改变),我不得不用.class2:hover a {}它来工作.在这样做的时候,我对两者之间的区别感到困惑,因为它们之间的编写方式非常相似.
谢谢!
编辑
编辑问题更清楚.谢谢你解开我的大脑:)
我的理解是这样的:
.class2 a:hover.class2当a标记悬停时,将定位元素内的任何超链接标记.
.class2:hover a将a在悬停.class2时定位元素内的任何超链接标记.class2.
区别在于您为了更改这些样式规则而悬停的元素.
例:
.box{
background: red;
width: 50px;
height: 50px;
margin-bottom: 10px;
}
.case1 a:hover {
background: blue;
}
.case2:hover a {
background: green;
}Run Code Online (Sandbox Code Playgroud)
<html>
<body>
<div class="box case1"><a href="#">case 1</a></div>
<div class="box case2"><a href="#">case 2</a></div>
</body>
</html>Run Code Online (Sandbox Code Playgroud)
在这种情况下,你想悬停.class2元素还是a?