偽類、偽元素的權重
- php中世界最好的语言原創
- 2018-03-12 16:32:551649瀏覽
這次帶給大家偽類、偽元素的權重，使用偽類、偽元素的權重的注意事項有哪些，下面就是實戰案例，一起來看一下。
<!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>我相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！
相關閱讀：
以上是偽類、偽元素的權重的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
上一篇：vue的生命週期鉤子函數詳解下一篇：vue的生命週期鉤子函數詳解