définition des priorités CSS

Dans la production de pages Web, nous devons souvent utiliser CSS pour contrôler les styles. En CSS, il existe de nombreuses façons de définir des styles, et différentes manières peuvent définir des styles pour le même élément en même temps. Dans ce cas, des problèmes de priorité CSS seront impliqués. Un élément peut avoir plusieurs définitions de style CSS, et pour déterminer quel style prendra finalement effet, il faut comprendre le paramètre de priorité CSS.

Priorité du sélecteur CSS

Les sélecteurs CSS sont des règles utilisées pour déterminer quels éléments appliquent quels styles. En CSS, la priorité d'un sélecteur est déterminée par son poids. Chaque sélecteur a une valeur de poids. Plus la valeur de poids est élevée, plus il est prioritaire.

La méthode de calcul de la valeur du poids du sélecteur CSS est :

• Pour chaque sélecteur, une valeur de base est attribuée en fonction du type du sélecteur et de la qualification correspondante conditions , telles que : le sélecteur d'élément est 1, le sélecteur de classe est 10, le sélecteur d'ID est 100, le style en ligne est 1000 ;
• pour une séquence de sélecteur (plusieurs sélecteurs séparés par des virgules), ajoutez les valeurs de base ​​de chaque sélecteur pour obtenir un total ;
• Pour chaque élément, utilisez la valeur de base du sélecteur avec la plus grande valeur de poids dans la séquence de sélecteur correspondante comme valeur prioritaire ;
#🎜🎜 #

Exemple :

<style>
    #idSelector {
        color: blue;
    }
    .classSelector {
        color: green;
    }
    div {
        color: red;
    }
</style>
<div id="idSelector" class="classSelector">Hello World!</div>

Dans cet exemple, l'élément Hello World! satisfait le sélecteur d'ID #idSelector et le sélecteur de classe .classSelector et le sélecteur d'élément div, alors CSS déterminera le style final utilisé selon les règles suivantes :

Hello World!这个元素满足了ID选择器#idSelector和类选择器.classSelector，以及元素选择器div，那么CSS会按照以下规则来确定最终使用的样式：

• ID选择器的权重值为100，那么#idSelector的基本值就是100；
• 类选择器的权重值为10，那么.classSelector的基本值就是10；
• 元素选择器的权重值为1，那么div的基本值就是1；
• 然后根据权重值相加的规则，#idSelector的总权重值是100，.classSelector的总权重值是10，div的总权重值是1；
• 最后，根据优先级值最大的选择器规则，元素dc6dce4a544fdca2df29d5ac0ea9906b的样式将会应用ID选择器#idSelector中的样式，即字体颜色将变成蓝色。

CSS属性重要性

有时候，我们可能想让某些样式规则无条件地覆盖其他样式规则。这时，我们需要用到CSS的!important属性。在CSS中，!important可以强制指定某个样式规则优先生效。

举例说明：

<style>
    p {
        color: blue !important;
    }
    .classSelector {
        color: green;
    }
</style>
<div class="classSelector">
    <p>Hello World!</p>
</div>

在这个例子中，P元素应用了颜色属性，并强制设置为!important。如果没有!important标记，其实P元素应用的是.classSelector中的颜色属性（默认为绿色），但是由于加了!important，P元素的颜色将强制设置为蓝色。

!important标记并不是万能的，它也不能重写内联样式。当内联样式存在时，即使为一个选择器设置了!important，也会被内联样式覆盖。

CSS内联样式优先级

在HTML中，内联样式是直接定义在HTML标签元素中的样式。由于内联样式作用于单个元素，所以内联样式的优先级总是最高的。

举例说明：

<div style="color: red">Hello world!</div>

在这个例子中，div元素使用了内联样式，颜色为红色。即使添加了其他CSS样式规则，也不会影响到内联样式。在这个例子中，div元素的颜色一定为红色。

CSS继承规则

CSS的继承规则规定，某些样式属性可以从父元素继承下来。当一个元素没有指定某些CSS属性值时，它们会从父元素中继承下来。比如，可能经常用到的font-family和font-size这两个CSS属性，它们的值可以从父元素继承。

举例说明：

<style>
    div {
        color: red;
    }
    .classSelector {
        font-size: 18px;
        font-family: Arial;
    }
</style>
<div class="classSelector">Hello world!</div>

在这个例子中，div元素设置了颜色为红色，没有设置字体属性。子元素使用了.classSelector的字体属性，因此字体将继承自.classSelector

La valeur de poids de le sélecteur d'ID est 100, alors la valeur de base de #idSelector est 100

La valeur de poids du sélecteur de classe est 10, alors la valeur de base de .classSelector est 10 ; 🎜#La valeur de poids du sélecteur d'élément est 1, alors la valeur de base de div est 1

Ensuite, selon les règles d'ajout de valeurs de poids, la valeur de poids totale de #idSelector est de 100 ; la valeur de poids total de .classSelector est de 10 et la valeur de poids total de div est de 1 #🎜🎜##🎜🎜#Enfin, selon la règle de sélection avec la plus grande valeur de priorité, l'élément dc6dce4a544fdca2df29d5ac0ea9906b appliquera le style dans le sélecteur d'ID <code>#idSelector, c'est-à-dire que la couleur de la police deviendra bleue. #🎜🎜##🎜🎜##🎜🎜#Importance de la propriété CSS#🎜🎜##🎜🎜# Parfois, nous pouvons souhaiter que certaines règles de style remplacent inconditionnellement d'autres règles de style. Pour le moment, nous devons utiliser l’attribut !important de CSS. En CSS, !important peut forcer une certaine règle de style à prendre effet en premier. #🎜🎜##🎜🎜#Exemple : #🎜🎜#rrreee#🎜🎜#Dans cet exemple, l'élément P a un attribut de couleur appliqué et est forcé de !important. S'il n'y a pas de balise !important, l'élément P applique en fait l'attribut color dans .classSelector (la valeur par défaut est verte), mais en raison de l'ajout de !important, la couleur de l'élément P sera forcée être bleu. #🎜🎜##🎜🎜#!La balise importante n'est pas omnipotente et ne peut pas non plus remplacer les styles en ligne. Lorsque des styles en ligne existent, même si !important est défini pour un sélecteur, il sera remplacé par le style en ligne. #🎜🎜##🎜🎜#Priorité du style en ligne CSS #🎜🎜##🎜🎜#En HTML, les styles en ligne sont des styles définis directement dans les éléments de balise HTML. Étant donné que les styles en ligne agissent sur un seul élément, les styles en ligne ont toujours la priorité la plus élevée. #🎜🎜##🎜🎜#Exemple : #🎜🎜#rrreee#🎜🎜#Dans cet exemple, l'élément div utilise un style en ligne et la couleur est rouge. Même si d’autres règles de style CSS sont ajoutées, les styles en ligne ne seront pas affectés. Dans cet exemple, la couleur de l'élément div doit être rouge. #🎜🎜##🎜🎜#Règles d'héritage CSS#🎜🎜##🎜🎜#Les règles d'héritage CSS stipulent que certains attributs de style peuvent être hérités des éléments parents. Lorsqu'un élément ne spécifie pas certaines valeurs de propriétés CSS, elles sont héritées de l'élément parent. Par exemple, les valeurs des deux propriétés CSS font-family et font-size qui peuvent être fréquemment utilisées peuvent être héritées de l'élément parent. #🎜🎜##🎜🎜#Exemple : #🎜🎜#rrreee#🎜🎜#Dans cet exemple, l'élément div définit la couleur sur rouge sans définir l'attribut font. L'élément enfant utilise l'attribut font de .classSelector, donc la police héritera de .classSelector, c'est-à-dire que la taille de la police est de 18 pixels et la police est Arial. La couleur sera héritée de l'élément parent div, qui est le rouge. #🎜🎜##🎜🎜#Résumé : #🎜🎜##🎜🎜#Bien que les règles de priorité CSS soient un peu lourdes, si nous les maîtrisons, nous pouvons mieux contrôler le style. Lors de la définition de la priorité, nous pouvons répondre à nos besoins en matière de priorité de certains attributs de style en modifiant le poids du sélecteur et l'attribut !important du style. Dans le même temps, nous devons également noter que les styles en ligne ont la priorité la plus élevée et remplaceront toutes les autres règles de style. Les règles d'héritage CSS nous permettent également de réduire la quantité de code et de mieux maintenir le code des pages web tout en assurant la cohérence des règles de style. #🎜🎜#

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!