CSS-hover不生效

<div class='ho'>
    <a>hover测试</a>
</div>

 

当鼠标经过链接时,变化链接字体颜色,如果a标签使用类选择器+后代选择器,而a:hover不用后代选择器,hover不生效,如:

.ho a {
  color:black;    
}

a:hover {
  color:red;
}

原因:a:hover 表示的时当鼠标悬停在a标签上时,改变a标签的样式,其本质就只是改变a标签的样式,而.ho a选择器也改变了a的样式,其权重大于a:hover选择器权重,导致a:hover失效,更改a:hover权重后即可生效

.ho a {
  color:black;    
}

a:hover {
  color:red !important;
}

 

posted @ 2021-07-07 20:40  木子的学习笔记  阅读(2266)  评论(0编辑  收藏  举报