suchen

Heim >Web-Frontend >CSS-Tutorial >Detaillierte Einführung in CSS-Stilgewichtungen

Detaillierte Einführung in CSS-Stilgewichtungen

高洛峰
高洛峰Original
2017-03-04 10:24:481749Durchsuche

InLine-Stil>Internes Stylesheet>Externes Stylesheet

Ausnahme: Wenn das externe Stylesheet jedoch im Inneren platziert ist Das Stylesheet wird unten zitiert, dann externes Stylesheet > internes Stylesheet

1, das Gewicht des Inline-Stylesheets beträgt 1000;

2, das Gewicht des ID-Selektors beträgt 100;

3, das Gewicht des Class-Klassenselektors beträgt 10;

4, die Gewichtung des HTML-Tag-Selektors ist 1;

Der spezifische Code lautet wie folgt: 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS样式权值</title>
    <style>
        body{   
            font-size: 20px;   
            font-weight: 900;    
        }   
        h3{   
            color: yellow;   
        }   
        #redP p{   
            /*权值100+1=101*/   
            color: #f00;   
            /*红色*/   
        }   
        #redP p.red em{   
            /*权值100+1+10+1=112*/   
            color: #00f;   
            /*蓝色*/   
        }   
        #redP .red em{   
            /*权值100+10+1=111*/   
            color: #0ff;   
            /*亮蓝色*/   
        }   


        #redP p span em{   
            /*权值100+1+1+1=103*/   
            color: #ff0;   
            /*黄色*/   
        }   
    </style>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h3>例外:外部样式表>内部样式表</h3>
    <p id="redP">
        <p class="red">
            <span>
                <em>emred</em>
            </span>
        </p>
        <p>red</p>
    </p>
</body>
</html>

Das Obige Der Artikel, in dem es um die Gewichtung im CSS-Stil geht, ist der gesamte vom Herausgeber geteilte Inhalt. Ich hoffe, dass er Ihnen eine Referenz geben kann, und ich hoffe auch, dass Sie die chinesische PHP-Website unterstützen.

Ausführlichere Artikel zu CSS-Stilgewichten finden Sie auf der chinesischen PHP-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 Einführung in die CSS-Stil-Override-RegelnNächster Artikel：Detaillierte Einführung in die CSS-Stil-Override-Regeln

In Verbindung stehende Artikel

Mehr sehen