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

Table des matières

Priorité du sélecteur et poids !important en CSS

Sélecteur de balises et sélecteur .class

微笑是最初的信仰

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

Maison

interface Web

tutoriel CSS

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

Dec 31, 2020 pm 05:23 PM

css 权重

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 id="微笑是最初的信仰">微笑是最初的信仰</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 id="微笑是最初的信仰">微笑是最初的信仰</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 :

1	`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 id="微笑是最初的信仰">微笑是最初的信仰</h2>
</body>
</html>

Copier après la connexion

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!

Déclaration de ce site Web

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn