suchen

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

Detaillierte Einführung in CSS-Stilgewichtungen

高洛峰
高洛峰Original
2017-03-28 10:34:501539Durchsuche

InLine-Stil>Internes Stylesheet>Externes Stylesheet
Ausnahme: Aber wenn das externe Stylesheet im Inneren platziert ist Das Stylesheet wird unten zitiert, dann externes Stylesheet > internes Stylesheet 1, die Gewichtung des Inline-Stylesheets beträgt 100;
2, die Gewichtung des ID-Selektors beträgt 100;
3, die Gewichtung der Klasse des Selektors beträgt 10; 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 ist der detaillierte Inhalt vonDetaillierte Einführung in CSS-Stilgewichtungen. 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 Einführung in die Verwendung von CSS3 zur Verbesserung von StileffektenNächster Artikel：Detaillierte Einführung in die Verwendung von CSS3 zur Verbesserung von Stileffekten

In Verbindung stehende Artikel

Mehr sehen