这次给大家带来伪类、伪元素的权重,使用伪类、伪元素的权重的注意事项有哪些,下面就是实战案例,一起来看一下。
<!doctype html><html lang="en"><head>
<meta charset="utf-8">
<title>document</title>
<style>
*{ margin: 0; padding: 0;
} #a .b a{
color: yellow;
} .b a{
color: pink;
} a:hover{
color: red;
} /*
分析:
规则1:伪类(像:hover,:visited,:active,:link)的权重和类选择器是一样的
规则2:伪元素,像before,after优先级和标签选择器是一样的(这一条了解一下,和这道题无关)
#a .b a 的权重为:(0,1,1,1)
.b a的权重为:(0,0,1,1)
a:hover的权重为:(0,0,1,1)
结论:
#a .b a 的权重最高,所以,如果有这个样式的设置,页面上的a链接是黄色的,鼠标hover上去也是黄色的
如果把#a .b a去掉,.b a的权重和a:hover的权重一致,那他们就看谁在最后面,在最后面写的会层叠掉前面的
*/
</style></head><body>
<div class="a" id="a">
<div class="b"><a href="#">我是链接</a></div>
</div></body></html>
相信看了本文案例你已经掌握了方法,更多精彩请关注其它相关文章!
相关阅读:
rxjs的使用详解
python编写的通知栏脚本启动工具
使用flv.js与video.js做一个视频直播效果
以上就是伪类、伪元素的权重的详细内容。