Home > Article > Web Front-end > The weight of pseudo-classes and pseudo-elements
This time I will bring you the weights of pseudo-classes and pseudo-elements. What are the precautions for using the weights of pseudo-classes and pseudo-elements? The following is a practical case, let’s take a look.
<!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>I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website! Related reading:
Detailed explanation of the use of Rxjs
Notification bar script startup tool written in Python
Use flv.js and video.js to create a live video effect
The above is the detailed content of The weight of pseudo-classes and pseudo-elements. For more information, please follow other related articles on the PHP Chinese website!