Heim > Artikel > Web-Frontend > Das Gewicht von Pseudoklassen und Pseudoelementen

Das Gewicht von Pseudoklassen und Pseudoelementen

php中世界最好的语言Original: 2018-03-12 16:32:551649Durchsuche

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>

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!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Detaillierte Erläuterung der Lebenszyklus-Hook-Funktion von vueNächster Artikel：Detaillierte Erläuterung der Lebenszyklus-Hook-Funktion von vue

In Verbindung stehende Artikel

Mehr sehen