Comment définir le poids en CSS-tutoriel CSS-php.cn

Comment définir le poids en CSS

青灯夜游

Libérer： 2023-01-07 11:41:42

original

10754 Les gens l'ont consulté

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.

Comment définir le poids en CSS

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>

Copier après la connexion

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>

Copier après la connexion

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>

Copier après la connexion

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>

Copier après la connexion

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>

Copier après la connexion

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.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>!important的使用</title>
        <style type="text/css">
            div{
                color:green !important;
            }
        </style>
    </head>
    <body>
        <div id="box" style="color:red;">
            <span>猜猜我是什么颜色</span>
        </div>
    </body>
</html>

Copier après la connexion

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; }
```
Copier après la connexion
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!