Maison >interface Web >tutoriel CSS >Comment définir le poids en CSS

Comment définir le poids en CSS

青灯夜游original: 2021-07-01 17:35:1510706parcourir

En CSS, vous pouvez utiliser l'instruction "!important" pour définir le poids, ce qui permet aux développeurs d'augmenter le poids du style ; le format de syntaxe est "property:property value !important;". L'instruction "!important" est une déclaration de l'ensemble du style, y compris les attributs et les valeurs d'attribut de ce style.

L'environnement d'exploitation de ce tutoriel : système Windows7, version CSS3&&HTML5, ordinateur Dell G3.

Poids CSS

fait référence à la priorité des styles. Il existe deux styles ou plus qui agissent sur un élément. Le style avec le poids le plus élevé agit sur l'élément. plus tard l'écrasera. Le style écrit plus tôt.

Niveau de poids

(1) !important, ajouté après la valeur de l'attribut de style, la valeur de poids est 10000

(2) Style en ligne, tel que : , la valeur de poids est 1000

(3) Sélecteur d'ID, tel que : #content, la valeur de poids est 100

(4) Sélecteur de classe, de pseudo-classe et d'attribut, tel que : content, :hover, la valeur de poids est 10

(5) Balise sélecteur et sélection de pseudo-éléments Sélecteur, tel que : div, p, : avant que la valeur du poids soit 1

(6) Sélecteur universel (*), sous-sélecteur (>), sélecteur adjacent (+), sélecteur frère (~ ), poids Comment définir le poids en css lorsque la valeur est 0

En CSS, vous pouvez utiliser l'instruction "!important" pour définir le poids, ce qui permet aux développeurs d'augmenter le poids du style.

Exemple de valeur de poids CSS (chevauchement)

Il existe de nombreux sélecteurs en CSS, alors que se passera-t-il lorsque plusieurs sélecteurs agissent sur le même élément Code

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
      p{
        color:red;
        font-size: 10px;
      }
      #wrap{
        color: deeppink;
        font-size: 30px;
      }
      .box{
        color:yellow;
        font-size: 50px;
      }
    </style>
  </head>
  <body>
    <p id="wrap">
       猜猜我是什么颜色
    </p>
  </body>
</html>

L'exécution peut en résulter
Résumé : Cet effet se produit car le navigateur détermine quel style CSS utiliser en fonction de la valeur de poids. Plus la valeur de poids est élevée, plus sa priorité sera élevée et le résultat sera affiché. le sélecteur d'identifiant est 100> sélecteur de classe 10> sélecteur d'étiquette 1, donc le résultat final est le style défini par le sélecteur d'identifiant
Exemple 2 de code

!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
      *{
          color: cyan;
      }
      div {
          color: yellow;
      }
    </style>
  </head>
  <body>
    <div>
        <p id="wrap">
        猜猜我是什么颜色
        </p>
    </div>
  </body>
</html>

Résultat de l'exécution

Résumé : Les éléments hérités n'ont pas de valeur de poids, le résultat final est donc le style défini par le sélecteur universel
Exemple 3 Code

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
      p{
          color: yellow;
      }
      *{
          color: cyan;
      }
    </style>
  </head>
  <body>
    <div>
        <p id="wrap">
        猜猜我是什么颜色
        </p>
    </div>
  </body>
</html>

Résultat de l'exécution
Résumé : La valeur de poids de la balise selector est 1, mais il est toujours supérieur au sélecteur universel, donc le résultat final est le style défini par le sélecteur de balise
Exemple 4 Code

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
      div p{
          color: yellow;
      }
      div>p{
          color: cyan;
      }
      p{
          color: red;
      }
    </style>
  </head>
  <body>
    <div>
        <p id="wrap">
        猜猜我是什么颜色
        </p>
    </div>
  </body>
</html>

Résultat d'exécution

Exemple cinq Code

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
      div>p{
          color: cyan;
      }
      div p{
          color: yellow;
      }
      p{
          color: red;
      }
    </style>
  </head>
  <body>
    <div>
        <p id="wrap">
        猜猜我是什么颜色
        </p>
    </div>
  </body>
</html>

Résultats d'exécution

!important Exemple d'augmentation de la valeur de poids

Lorsque nous créons du code de page Web, il existe des situations particulières dans lesquelles nous devons définir la valeur de poids la plus élevée pour certaines styles. Que devons-nous faire ? Par exemple, nous savons que la valeur de poids du style en ligne est de 1 000, ce qui est relativement grand, nous pouvons alors utiliser !important pour le résoudre.

76c82f278ac045591c9159d381de2c57
100db36a723c770d327fc0aef2ce13b1
    93f0f5c25f18dab9d176bd4f6de5d30e
        a80eb7cbb6fff8b0ff70bae37074b813
        b2386ffb911b14667cb8f0f91ea547a7!important的使用6e916e0f7d1e588d4f442bf645aedb2f
        46d5fe1c7617e3914f214aaf043f4ccf
            div{
                color:green !important;
            }
        531ac245ce3e4fe3d50054a55f265927
    9c3bca370b5104690d9ef395f2c5f8d1
    6c04bd5ca3fcae76e30b72ad730ca86d
        afc4380047850c27da0e1725edddceea
            45a2772a6b6107b401db3c9b82c049c2猜猜我是什么颜色54bdf357c58b8a65c66d7c19c8e4d114
        16b28748ea4df4d9c2150843fecfba68
    36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e

Résultats d'exécution

Résumé : Utiliser !important est une mauvaise habitude et doit être évité autant que possible, car cela endommage sérieusement les règles de comparaison des valeurs de poids inhérentes à la feuille de style, rendre difficile le débogage des bogues devient plus difficile. Lorsque deux règles contradictoires avec !important s'appliquent à la même balise, celle ayant la priorité la plus élevée sera utilisée.

Dans quelles circonstances pouvez-vous utiliser !important ?

Le premier
- Vous avez un fichier CSS avec un style de site complet sur votre site internet
- En même temps, vous ou votre des amis écrivent Vous avez de mauvais styles en ligne
Le deuxième
```
box p { color: blue; } p.awesome { color: red; }
```
Comment puis-je rendre la couleur du texte rouge ? Dans ce cas, si !important ne s'applique pas, la première règle sera toujours supérieure à la deuxième règle.

Résumé

(Partage de vidéos d'apprentissage : Tutoriel vidéo CSS)

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：

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

Article précédent：Comment supprimer la bordure gauche en CSSArticle suivant：Comment supprimer la bordure gauche en CSS

Articles Liés

Voir plus