Quel est l'ordre de priorité des sélecteurs CSS ?

Quand nous écrivons la page, je me demande si vous aurez un tel problème. Pourquoi le style que j'y ai ajouté a clairement sélectionné l'élément que je veux lui donner, mais son style ne prend pas effet ? En cas de conflit entre les attributs définis, quel ensemble de styles le navigateur choisira-t-il d'utiliser ? Ce chapitre vous présentera l'ordre de priorité des sélecteurs CSS. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il vous sera utile.

1. Priorisation des sélecteurs

　1. ! important

Écrire ce style après l'attribut remplacera le style de l'élément défini n'importe où sur la page.

　2. Style en ligne, le style écrit dans l'attribut style.

3. Sélecteur d'identifiant

4. Sélecteur de classe

5. Sélecteur de balise

6. Sélecteur de caractères génériques

7. Personnalisé du navigateur attributs et héritage

L'ordre de tri écrit ci-dessus est la priorité/poids. Vous pouvez l'essayer vous-même pour comparer leur ordre de taille.

2. Priorité du sélecteur complexe, priorité du sélecteur descendant dans diverses situations.

Parfois, lorsque nous écrivons des styles, nous utiliserons plusieurs styles descendants, alors quelle est la situation prioritaire ? Regardons quelques exemples.

1. Celui avec plus d'identifiant a une priorité plus élevée

#box .head span{
    color:blue;
}
.box .head span{
    color:red;
}<br data-filtered="filtered">//下面span标签的颜色是蓝色的
　　<div class="box" id="box">
　　　　<div class="head">
　　　　　　<span>我的颜色</span>
　　　　</div>
　　</div>

2 Le nombre d'identifiant et de classe est égal, selon le nombre d'éléments, plus le nombre est élevé, plus il est élevé. la priorité.

//颜色应用的是第一个的样式，粉色<br data-filtered="filtered">#box .head p span{
　　color:deeppink;
}
#box .head span{
　　color:blue;
}
#box .head span{
　　color:red;
}
 
<div class="box" id="box">
　　<div class="head">
　　　　<p class="p"><span>我的颜色</span></p>
　　</div>
</div>

3. Les priorités sont les mêmes, et les styles ultérieurs écraseront les styles précédents, sans ordre particulier, uniquement le type et le numéro du sélecteur.

//蓝色，优先级相同，后面的覆盖前面的，id、class、元素的个数不分先后顺序
#box .head p span{
    color:red;
}
#box div .p span{
    color:blue;
}
 
<div class="box" id="box">
    <div class="head" id="head">
        <p class="p" id="p"><span>我的颜色</span></p>
    </div>
</div>

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!