Einführung in die CSS-Stilpriorität:
Wenn externer Stil, interner Stil und Inline-Stil gleichzeitig auf dasselbe Element angewendet werden, ist die Priorität wie folgt:
(Externer Stil) Externes Stylesheet
Es gibt eine Ausnahme: Wenn der externe Stil nach dem internen Stil platziert wird, überschreibt der externe Stil den internen Stil.
Beispiele sind wie folgt:
rrreeDie Priorität des Selektors
Erläuterung:
1. Das Gewicht des Inline-Stylesheets beträgt bis zu 1000;
2. Das Gewicht des ID-Selektors beträgt 100
3. Die Gewichtung des Klassenselektors beträgt 10
4. Die Gewichtung des HTML-Tag-Selektors beträgt 1
Verwenden Sie die Gewichtung des Selektors zum Berechnen und Vergleichen. Daten im -Tag werden blau angezeigt.
CSS-Prioritätsregel:
A Jeder Selektor hat eine Gewichtung. Je größer die Gewichtung, desto höher die Priorität.
B Wenn die Gewichtungen gleich sind, sind die später angezeigten Stylesheet-Einstellungen besser als die zuerst angezeigten Stylesheet-Einstellungen.
C Die Regeln des Erstellers sind höher als die des Betrachters: Das heißt, der vom Webseitenautor festgelegte CSS-Stil hat eine höhere Priorität als der vom Browser festgelegte Stil.
D Der geerbte CSS-Stil ist nicht so gut wie der später angegebene CSS-Stil;
E In den Gruppenattributeinstellungen haben die mit „!important“ gekennzeichneten Regeln die höchste Priorität;
Ergebnis: Wird unter Firefox in Blau angezeigt; In IE 6 wird Rot angezeigt. Verwenden Sie Skripte, um Stile hinzuzufügen. , IE-Browser zeigt seine Einzigartigkeit. Der Code lautet wie folgt:
<head>
<style type="text/css">
/* 内部样式 */
h3{color:green;}
</style>
<!-- 外部样式 style.css -->
<link rel="stylesheet" type="text/css" href="style.css"/>
<!-- 设置：h3{color:blue;} -->
</head>
<body>
<h3>测试！</h3>
</body><html>
<head>
<style type="text/css">
#redP p {
/* 权值 = 100+1=101 */
color:#F00; /* 红色 */
}
#redP .red em {
/* 权值 = 100+10+1=111 */
color:#00F; /* 蓝色 */
}
#redP p span em {
/* 权值 = 100+1+1+1=103 */
color:#FF0;/*黄色*/
}
</style>
</head>
<body>
<div id="redP">
<p class="red">red
<span><em>em red</em></span>
</p>
<p>red</p>
</div>
</body>
</html>CSS-Tutorial
Das obige ist der detaillierte Inhalt vonPrioritätsregel im CSS-Stil. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
