Maison >interface Web >tutoriel CSS >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:384314parcourir

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>

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>

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

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>

Diagramme des résultats

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

Résumé

Priorité de faible à élevée, telle que : sélecteur de balises ,

sélecteur, .class sélecteur, #id attribut !important

Pour plus de connaissances liées à la programmation, veuillez visiter :

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!

css html class 选择器

Déclaration：

Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer

Article précédent：Comment transformer un carré en cercle en CSSArticle suivant：Comment transformer un carré en cercle en CSS

Articles Liés

Voir plus