The weight of pseudo-classes and pseudo-elements-JS Tutorial-php.cn

The weight of pseudo-classes and pseudo-elements

php中世界最好的语言

Release： 2018-03-12 16:32:55

Original

1656 people have browsed it

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>

Copy after login

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!