copie css à partir d'une classe à une autre?
Cela peut sembler une question très simple mais je n'arrive pas à trouver une réponse à cela.
Je sais qu'il est possible de définir une règle css pour plus d'un élément à la fois en tant que tel:
.element1, .element2{
font-size:14px;
}
Est-il possible, cependant, de faire exactement la même chose, mais d'appliquer le css de l'élément après le css pour element1 a été défini? Quelque chose comme ceci:
.element1{
font-size:14px;
}
/*later in the css... or in a separate file*/
.element2{
like:".element1";
font-weight:bold;
}
De sorte que element2 maintenant hérite de la css de l'élément.
La raison pour laquelle je suis en train de faire c'est parce que j'ai un css de définition d'une element1 qui se charge de toutes les pages du site. Alors, pour une page en particulier (qui charge le fichier css principal, avec son propre) je voudrais utiliser le style de element1 et d'y ajouter.
Ce que j'essaie d'éviter le chargement de la définition de element2 pour toutes les pages du site (y compris ceux qui n'ont même pas l'élément[s] avec la classe element2.
Cela pourrait-il être fait?
Je me rends compte que je pourrais facilement obtenir ce avec jQuery (c'est à dire $(".element2").addClass(".element1");
) mais je voudrais éviter d'utiliser des scripts pour mon css.
Merci!
OriginalL'auteur Yuval Karmi | 2009-07-31
Vous devez vous connecter pour publier un commentaire.
Vous pouvez utiliser:
tout en ayant
et donc les deux classes s'appliquent. jQuery est assez intelligent pour ajouter des classes et supprimer les classes de ce genre.
Aussi, vous pouvez utiliser quelque chose de plus avancé comme SASS qui s'installe mixin.
Ce qu'il a dit. Si vous voulez que votre ".element2" objets ont le style de ".element1" des objets, de leur donner la classe ".element1".
OriginalL'auteur Silviu Postavaru
Autant que je sache, non, ce n'est pas possible avec CSS seul. Vous avez déjà identifié un moyen d'atteindre vos objectifs, et je dois dire que c'est la meilleure façon de faire.
En CSS une classe ne peut hériter de son parent, et seulement si
<example-attribute>: inherit;
(j'ai utilisé cela aveccolor:
,background-color:
,font-family:
,font-size:
parmi d'autres, mais je vous préviens que si lefont-size
de la parent d'une taille décrite comme une augmentation ou une diminution, lafont-size
va changer à l'enfant, aussi.OriginalL'auteur David Thomas
CSS vraiment besoin de cette fonctionnalité. Spécification de plusieurs classes au niveau de l'élément est grande, mais pas la même chose que d'être en mesure d'aller:
Être en mesure d'avoir une classe à l'utilisation des styles à partir d'une autre classe, serait très puissant. Il serait passer cette partie du modèle d'héritage dans le CSS où il appartient, en laissant moins encombré de balisage.
Je travaille sur un site, là, où nous avons beaucoup de différentes combinaisons de polices. Certains h et p balises différente selon leur page et le contexte. C'est une vraie douleur d'avoir à le faire à notre liste de polices de police-famille d'avoir à exister dans chaque classe où nous avons besoin d'eux. J'aimerais être capable de faire cela:
Ci-dessus, ma liste de polices existerait dans un endroit central et je peux les appliquer à l'endroit où je veux, purement dans le fichier CSS. Si j'ai 100 p balises dans mon site, puis-je ajouter une "classe" à chacun d'eux pour ces exceptions, qui peuvent être une douleur. Cela est particulièrement vrai, lorsque vous avez plusieurs développeurs travaillent sur un seul site.
OriginalL'auteur Scott
De ce que vous décrivez vous le souhaitez .element1 à être disponibles et utilisés sur plusieurs pages, mais sur quelques exceptionnels pages que vous souhaitez éléments de la mise en œuvre de l' .element1 classe pour un look différent, dans votre exemple gras.
La réponse vous a été donné est certainement une approche et sera certainement le travail. Autre chose que vous pouvez faire est d'inclure d'autres CSS sur le exceptionnelle des pages.
Par exemple, vous pouvez avoir une allpages.css, qui est d'inclure dans toutes les pages et contient le fichier CSS:
Alors vous pouvez avoir un fichier CSS appelé exceptions.css qui contient:
Cela fonctionne car lorsque plusieurs règles sont définies pour le même sélecteur que les règles sont regroupées ensemble. En utilisant cette technique, vous n'avez pas à modifier les valeurs de classe pour les éléments HTML.
OriginalL'auteur Luis Perez
Une syntaxe semblable à celle utilisée dans http://lesscss.org/
J'espère que vous trouverez quelque chose d'utile personnel
OriginalL'auteur Alex Yaroshevich