les styles CSS ne sont pas hérités

En web design, CSS est un outil très important. Il propose une variété de styles pour embellir les pages Web, améliorant ainsi l'expérience des utilisateurs sur le site Web. Cependant, parfois en CSS, nous rencontrons des problèmes plus difficiles. L'un des problèmes est que les styles CSS ne sont pas hérités.

Qu'est-ce qu'un style CSS qui n'hérite pas ?

En termes simples, les styles CSS ne sont pas hérités lorsque nous définissons un style sous un sélecteur, mais ce style ne sera pas hérité dans les éléments enfants du sélecteur. Cette situation rend souvent la conception de sites Web extrêmement difficile. Par exemple, supposons que nous souhaitions définir une taille de police pour le corps du texte de l'ensemble du site Web, mais si la taille de police d'un élément enfant sous le sélecteur a déjà été définie, alors tous les éléments enfants sous le sélecteur n'hériteront pas de la taille de police. . Taille de la police. Cela nous oblige à réinitialiser la taille de la police dans chaque sous-élément, ce qui est très fastidieux et peu propice à la maintenance du code.

Les raisons pour lesquelles les styles CSS ne sont pas hérités

Normalement, les styles CSS ne sont pas hérités pour les raisons suivantes :

1. utilisé Spécial Propriétés CSS

Certaines propriétés CSS ne prennent pas en charge l'héritage. Par exemple, les propriétés CSS telles que display, position, float et clear ne prennent pas en charge l'héritage. Si ces attributs sont utilisés dans un sélecteur, tous les éléments enfants sous le sélecteur n'hériteront pas du style.

2. L'élément enfant hérite du style de l'élément parent mais est modifié

Parfois, un nouveau style est défini dans l'élément enfant. ce style ne sera plus hérité de l'élément parent. Cela est généralement dû au fait que le nouveau style entre en conflit avec le style hérité, ce qui entraîne le remplacement du style hérité.

3. Les éléments enfants sont interprétés comme des éléments frères via des règles de sélection

Si les règles de sélection des éléments enfants sont interprétées comme des éléments frères, au lieu d'être un élément enfant de l'élément parent, le style ne sera pas hérité. Par exemple, si vous utilisez + ou ~ pour sélectionner des éléments frères dans une feuille de style, ces styles ne seront pas hérités.

Comment résoudre le problème des styles CSS non hérités

1. Utiliser le sélecteur global

Utiliser le sélecteur global pour force Les éléments enfants héritent des styles de leurs éléments parents. Comme indiqué ci-dessous :

Style de l'élément parent :

.parent-element {
  font-size: 16px;
}

Style de l'élément enfant :

.child-element {
  all: initial;
  font-size: inherit;
}

Dans le style de l'élément enfant, nous utilisons tous : l'initiale de réinitialisez tous les styles à leurs valeurs par défaut, puis utilisez font-size:herit pour hériter de la taille de police de l'élément parent.

2. Utilisez les propriétés CSS avec un meilleur héritage

Certaines propriétés CSS prennent en charge l'héritage. Elles peuvent être définies une fois par l'élément parent, mais l'élément enfant. will Cette valeur est automatiquement héritée. Par exemple, les propriétés CSS telles que color, font-size et font-family prennent toutes en charge l'héritage. Si nous utilisons ces attributs dans le sélecteur, alors les éléments enfants peuvent hériter de cet attribut.

3. Réduire l'imbrication des sélecteurs

Éviter l'imbrication des sélecteurs peut éviter le problème de l'héritage des éléments enfants. Lors de l'écriture de styles CSS, vous devez essayer d'utiliser des sélecteurs simples et éviter l'imbrication des sélecteurs.

4. Ajouter !important en cas de conflit de styles

Dans certains cas, nous ne pouvons pas éviter d'utiliser des propriétés CSS spéciales ou l'imbrication de sélecteurs, vous pouvez alors utiliser !important à la fin du style pour garantir que le style a la priorité la plus élevée, remplaçant ainsi les autres styles.

Résumé

En CSS, les styles qui ne sont pas hérités peuvent rendre la conception Web particulièrement lourde. Cependant, tant que nous maîtrisons certaines compétences et méthodes, nous pouvons facilement résoudre ce problème. L'utilisation de sélecteurs globaux, l'utilisation de propriétés CSS avec un meilleur héritage, la réduction de l'imbrication des sélecteurs et l'utilisation de !important sont des méthodes courantes pour résoudre le problème du non-héritage des styles 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!