Home > Web Front-end > JS Tutorial > The weight of pseudo-classes and pseudo-elements

The weight of pseudo-classes and pseudo-elements

php中世界最好的语言
Release: 2018-03-12 16:32:55
Original
1742 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!

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!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template