Das Gewicht von Pseudoklassen und Pseudoelementen-js-Tutorial-php.cn

Das Gewicht von Pseudoklassen und Pseudoelementen

php中世界最好的语言

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

Original

1732 Leute haben es durchsucht

Dieses Mal werde ich Ihnen die Gewichte von Pseudoklassen und Pseudoelementen vorstellen. Was sind die Vorsichtsmaßnahmen, wenn Sie die Gewichte von Pseudoklassen und Pseudoelementen verwenden? ein Blick.

<!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>

Nach dem Login kopieren

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website.

Verwandte Lektüre:

Detaillierte Erläuterung der Verwendung von Rxjs

In Python geschriebenes Benachrichtigungsleisten-Skript-Starttool

Verwenden Sie flv.js und video.js, um einen Live-Videoeffekt zu erstellen

Das obige ist der detaillierte Inhalt vonDas Gewicht von Pseudoklassen und Pseudoelementen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!