這次帶給大家偽類、偽元素的權重,使用偽類、偽元素的權重的注意事項有哪些,下面就是實戰案例,一起來看一下。
<!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中文網其他相關文章!