Trois fonctionnalités majeures de CSS que vous devez connaître

Cette fois je vais vous présenter les trois fonctionnalités majeures du CSS que vous devez connaître. Quelles sont les précautions d'utilisation des trois fonctionnalités majeures du CSS Voici des cas pratiques, jetons un oeil.

Trois fonctionnalités majeures de CSS : héritage, cascade, priorité

1 Héritage

1 Qu'est-ce que l'héritage ?

Fonction : définir les éléments parents. certains attributs, qui peuvent également être utilisés par les sous-éléments. Nous appelons cela l'héritage

Remarque :

1 Tous les attributs ne peuvent pas être hérités, seuls ceux avec 75fbd1e7e2a9adc1fd0680325098825a peut être hérité

2 Dans l'héritage CSS, non seulement les fils peuvent hériter, mais aussi les descendants peuvent hériter

3. 8e99a69fbe029cd4e2b854e244eab143Spécialité en matière d'héritage128dba7a3a77be0113eb0bea6ea0a5d0

3.1 La couleur du texte et le soulignement de la balise a ne peuvent pas être hérités (8e99a69fbe029cd4e2b854e244eab143 c'est-à-dire qu'ils ne peuvent pas être hérités via Obtenir128dba7a3a77be0113eb0bea6ea0a5d0 )

3.2 La taille du texte de la balise h ne peut pas être héritée (8e99a69fbe029cd4e2b854e244eab143 c'est-à-dire qu'elle ne peut pas être obtenue par héritage128dba7a3a77be0113eb0bea6ea0a5d0)

Scénarios d'application :

est généralement utilisé pour définir certaines informations courantes sur la page Web, telles que la couleur du texte, la police, la taille du texte, etc. de la page Web
corps{} >>> généralement défini dans le corps

2. Cascade

1 Qu'est-ce que la cascade ?

Fonction : La cascade est la capacité du CSS à gérer les conflits

Notes. :

La cascade ne se produira que si "la même balise" est sélectionnée dans plusieurs sélecteurs, puis le "même attribut" est défini

Nom complet CSS Cascading StyleSheet (Cascading Style Sheet)

Répertorié comme :

<style>
        p{            color: red;
        }        .para{            color: blue;
        } </style>
 <p id="identity" class="para">我是段落</p>

3. Priorité

1. Qu'est-ce que la priorité

Fonction : Lorsque plusieurs sélecteurs sont sélectionnés Lorsque la même balise et la même ? les attributs sont définis pour la même balise, la façon de cascader est déterminée par la priorité

2 Trois façons de juger la priorité

2.1 La sélection indirecte fait référence à l'héritage
S'il s'agit d'une sélection indirecte, alors celui qui est le plus proche du label cible l'écoutera

2.2 Même sélecteur (sélection directe)
S'ils sont tous directement sélectionnés, et qu'ils sont tous du même type de sélecteur de sélection, alors celui qui l'écrit plus tard je l'écouterai

2.3 Différents sélecteurs (sélection directe)
S'ils sont tous sélectionnés directement et ne sont pas du même type de sélecteur, alors le sélecteur sera utilisé en priorité pour cascader :

id>Class>Tag>Wildcard>Héritage>Par défaut du navigateur

id>Class>Tag>Pass>Héritage>Parcourir

4 !important

1. is !important

Fonction : Utilisé pour augmenter la priorité d'un attribut dans un sélecteur qui sélectionne directement une balise, La priorité de l'attribut spécifié peut être élevée au niveau le plus élevé

Remarque :

1.!important ne peut être utilisé que pour une sélection directe, 8e99a69fbe029cd4e2b854e244eab143 ne peut pas être utilisé pour une sélection indirecte3eca6633a7888701eae35daa62509e18

2 La balise sélectionnée par le sélecteur de caractère générique est également directement sélectionnée. . Vous pouvez également utiliser !important pour augmenter la priorité.

3.!important ne peut augmenter que la priorité de l'attribut spécifié. La priorité des autres attributs ne sera pas augmentée

4.! important doit être écrit avant le point-virgule de la valeur de l'attribut

5. Le point d'exclamation devant !important ne peut pas être omis

 <style>
      p{
         color: red !important; //提升优先级到最高
         font-size: 30px; //不会提升优先级(说明了上面的第3点)
       }  </style>

5. >1. Quel est le poids de priorité ?

Fonction : Lorsque plusieurs sélecteurs sont mélangés, nous pouvons déterminer lequel est sélectionné en calculant le poids qui a la priorité la plus élevée

2. règles de calcul

2.1 Calculez d'abord le nombre d'identifiants qu'il y a dans le sélecteur, et le sélecteur avec plus d'identifiants a la priorité la plus élevée

2.2 Si si le nombre d'identifiants est le même, alors regardez le nombre de noms de classe. Celui avec plus de noms de classe a la priorité la plus élevée

2.3 Si le nombre de noms de classe est le même, alors regardez le nombre de noms de balises. Celui avec plus de noms de balises a le. priorité la plus élevée

2.4 Si le nombre d'identifiants est le même, le nombre de noms de classe est le même et le nombre de noms de balises est le même, alors le calcul ne continuera pas, alors à ce moment-là, celui qui écrit plus tard écoutera qui que ce soit

Autrement dit, si les priorités sont les mêmes, alors celui qui écrit plus tard écoutera qui que ce soit

Remarque :

1). Seuls les labels doivent être calculés, sinon ils écouteront certainement le sélecteur directement sélectionné

2). Le poids du joker est 0

Je pense que vous maîtrisez la méthode après lecture ; le cas dans cet article, et plus encore Comme c'est excitant, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Comment charger HTMLString dans iOS webView

Conseils HTML5 qui sont facilement négligés

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!