Comprendre la priorité du sélecteur CSS et le poids !important-tutoriel CSS-php.cn

Comprendre la priorité du sélecteur CSS et le poids !important

青灯夜游

Libérer： 2020-12-31 17:23:56

avant

4312 Les gens l'ont consulté

Comprendre la priorité du sélecteur CSS et le poids !important

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
#id est plus haut que le sélecteur .class.
Le sélecteur de balises est le sélecteur de priorité la plus basse. L'attribut de
!important a 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>

Copier après la connexion

Graphique des résultats

Comprendre la priorité du sélecteur CSS et le poids !important

.sélecteur de classe et sélecteur d'identifiant

Entrons dans ou le sélecteur .class Le contenu de la pratique est tel que : définir la couleur du texte de la balise id dans la page HTML. h2

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; /*绿色*/
       }
       #box{
           color:blue; /*蓝色*/
       }
    </style>
</head>
  
<body>
   <h2 class="box" id="box">微笑是最初的信仰</h2>
</body>
</html>

Copier après la connexion

Graphique des résultats

Comprendre la priorité du sélecteur CSS et le poids !important

!Utilisation importante du poids

Maintenant, nous connaissons la priorité du sélecteur de balises La plus basse niveau, donc si j'ajoute l'attribut

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; /*红色*/

Copier après la connexion

Remarque :

les valeurs d'attribut peuvent être séparées par des espaces. 属性：值 !important

Prenons la pratique de l'utilisation des attributs

et voyons à quel point les attributs !important sont puissants. !important

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>!important使用</title>
    <style>
       h2{
           color: red !important; /*红色*/
       }
       .box{
            color: springgreen; /*绿色*/
       }
       #box{
           color:blue; /*蓝色*/
       }
    </style>
</head>
  
<body>
   <h2 class="box" id="box">微笑是最初的信仰</h2>
</body>
</html>

Copier après la connexion

Diagramme des résultats

Comprendre la priorité du sélecteur CSS et le poids !important