Maison > Article > interface Web > Comprendre la priorité du sélecteur CSS et le poids !important
Comprendre la priorité du sélecteur CSS et le poids !important
- 青灯夜游avant
- 2020-12-31 17:23:384254parcourir
Recommandé : Tutoriel vidéo CSS
Priorité du sélecteur et poids !important en CSS
-
.classLe Le sélecteur doit être plus haut que le sélecteur d'étiquette. Le sélecteur -
#idest plus haut que le sélecteur.class. - Le sélecteur de balises est le sélecteur de priorité la plus basse. L'attribut de
-
!importanta la priorité la plus élevée et est supérieur à tous les sélecteurs.
Sélecteur de balises et sélecteur .class
Entrons dans la pratique de celui qui a la priorité la plus élevée, le sélecteur de balises et le sélecteur .class Le contenu de la pratique est le suivant : HTML La balise h2 dans la page définit la couleur du texte.
Bloc de code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>优先级</title>
<style>
h2{
color: red; /*红色*/
}
.box{
color: springgreen; /*绿色*/
}
</style>
</head>
<body>
<h2 class="box">微笑是最初的信仰</h2>
</body>
</html>Graphique des résultats
.sélecteur de classe et sélecteur d'identifiant
Entrons dans.class Le contenu de la pratique est tel que : définir la couleur du texte de la balise id dans la page HTML. h2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>优先级</title>
<style>
h2{
color: red; /*红色*/
}
.box{
color: springgreen; /*绿色*/
}
#box{
color:blue; /*蓝色*/
}
</style>
</head>
<body>
<h2 class="box" id="box">微笑是最初的信仰</h2>
</body>
</html>Graphique des résultats
au sélecteur de balise, qui a une priorité plus élevée ? !important!Le format d'utilisation du poids important est le suivant :
color: red !important; /*红色*/Remarque :
les valeurs d'attribut peuvent être séparées par des espaces. 属性：值 !important
et voyons à quel point les attributs !important sont puissants. !important
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>!important使用</title>
<style>
h2{
color: red !important; /*红色*/
}
.box{
color: springgreen; /*绿色*/
}
#box{
color:blue; /*蓝色*/
}
</style>
</head>
<body>
<h2 class="box" id="box">微笑是最初的信仰</h2>
</body>
</html>Diagramme des résultats
sélecteur, .class sélecteur, #id attribut !important
Enseignement de la programmation ! !
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!