常见伪类
: hover link visited active
: after before
他们的优先级相当于类(class)
<style>
a:hover{
color: white
}
.a1{
color: red
}
</style>
<body>
<div class="div1">
<ul>
<li><a class="a1" href="#">我的颜色</a></li>
</ul>
</div>
</body>
此时
第一个样式 有一个伪类 一个标签
第二个样式只有一个类
所以第一个样式的优先级高，白色生效
<style>
a:hover{
color: white
}
li .a1{
color: red
}
</style>
此时
第二个样式有一个标签 一个类 所以两个样式优先级相当
后者覆盖前者
hover元素时没有反应
红色生效
不过这种情况一般我们先写样式 再写hover 保证hover时元素变化
——————————————————————
Paste_Image.png
如果页面中有很多a标签都要加hover 如果能找到给这些a加样式的代码行
选择器照搬 在后面直接加hover肯定没问题
但如果这些a没有统一在一个代码行 而是分开写的样式
除了分别加hover，当然比较麻烦
可以在最外层，比如footer标签下直接加样式
如:footer a:hover{ color:red }
但很可能优先级不够 页面hover时没有效果
此时可以这么写
footer a:hover{ color:red !important }
保证这个样式hover时生效
网友评论