Héritage CSS
Dire que j'ai un div comme ce qui va avoir tous les mêmes propriétés avec une image d'arrière-plan ou quelque chose comme ça:
div.someBaseDiv
{
margin-top:3px;
margin-left:auto;
margin-right:auto;
margin-bottom:0px;
}Et j'ai voulu hériter de cette façon:
div.someBaseDiv someInheritedDiv
{
background-image:url("images/worldsource/customBackground.gif");
background-repeat:no-repeat;
width:950px;
height:572px;
}Bien sûr, je suis sûr que cela est écrit mal, et je n'ai pas peur de demander de l'aide, si quelqu'un peut me dire comment faire ce travail et inclure les balises HTML?
- Je n'ai aucune idée de ce que vous essayez de faire? C'est un sélecteur "div.someBaseDiv someInhertedDiv". Il n'a rien à voir avec l'héritage. La dernière partie de la sélection "someInhertedDiv", je n'obtiens pas ce que c'est, soit. Héritage CSS signifie que certaines mais pas toutes les propriétés qui sont mis sur un parent ou un ancêtre éléments sont inhertied par l'enfant/decendant éléments. Par exemple, si vous avez un élément div tels que div#parent qui a un style de dire "color: blue", et que la div#parent contient un autre div, tels que div#enfant, que le div#enfant aussi obtenir le style de "color: blue;"
- Vous avez peut être source de confusion inhertiance avec le "someInhertedDiv". Comme indiqué, pas toutes les propriétés sont héritées, seulement quelques-unes, comme la couleur, la police, la taille de la police, poids, etc. Vous pouvez avoir HTML "<div id="parent">je suis un parent<div id="enfant">je suis un enfant</div></div>" et le CSS comme "div#parent{color: blue;}", Maintenant la div#enfant aura également de couleur bleu. C'est l'héritage CSS au travail.
Vous devez vous connecter pour publier un commentaire.
Le plus simple est d'ajouter votre someInheritedDiv élément de la première règle de ce type.
Cela indiquera à votre #someInheritedDiv à appliquer les mêmes styles que div.someBaseDiv a. Ensuite, vous étendre ce jeu de styles avec plus spécifiques à votre #someInheritedDiv:
C'est de cette façon spécificité dans le CSS fonctionne.
Utiliser à la fois classes et de les combiner comme suit:
Le balisage est comme suit:
Maintenant, dans ce mode, vous pouvez remplacer baseClass si nécessaire... et puisque vous n'avez pas à garder l'ajout d'une nouvelle classe de noms à la baseClass définition, c'est un peu plus propre.
Pour cette tâche, je vous recommande d'utiliser une puissante extension de CSS appelé MOINS. Il compile en CSS ou peuvent être utilisés à la volée avec un fichier javascript que le lien explique.
MOINS prend en charge l'héritage (presque) comme vous le décrivez. Le la documentation a les détails (voir la section "Mixin").
Pour votre exemple, le MOINS de code serait:
Remarque qu'il aurait à être
.someBaseDivet pasdiv.someBaseDivCe que vous voulez faire est de faire un peu de CSS s'appliquent aux deux types d'éléments, mais de leur permettre d'avoir quelques différences. Vous pouvez faire cela en utilisant un simple code HTML:
Et CSS:
Cela va ajouter les propriétés communes aux deux types de
div, mais celles qui le sont uniquement à des dérivésdivsCela dépend vraiment de votre balise. Si votre hérité de l'élément qui se trouve sous un div avec la classe
someBasDiv, puis tous les éléments enfants de il hérite automatiquement de ces propriétés.Si toutefois, vous souhaitez hériter de la
someBaseDivclasse dans n'importe quel endroit dans votre balisage, vous pourriez juste faire l'élément dont vous souhaitez hériter, l'utilisation de ces deux classes comme ceci:et votre css serait comme ceci:
Si vous voulez toutes les intérieurs DIVs avec une classe hérite de la classe de base construire le code HTML comme ceci:
Et le CSS
Si tous les DIVs doit hériter de changement
.childàdiv.regardez cet exemple sur jsFiddle
Le code suivant
Signifie: Un élément de plus haut niveau (tout) avec la classe
someClassva ajouter des styles à tous ses enfants de la Vrd (de manière récursive).