Par exemple si j'ai le HTML suivant:
<div class="someDiv"></div>
et ce CSS:
.opacity {
filter:alpha(opacity=60);
-moz-opacity:0.6;
-khtml-opacity: 0.6;
opacity: 0.6;
}
.radius {
border-top-left-radius: 15px;
border-top-right-radius: 5px;
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
}
.someDiv {
background: #000; height: 50px; width: 200px;
/*** How can I reference the opacity and radius classes here
so this div has those generic rules applied to it as well ***/
}
Comme comment dans les langages de script, vous avez des fonctions génériques qui sont souvent utilisées écrites en haut du script et chaque fois que vous devez utiliser cette fonction, vous appelez simplement la fonction au lieu de répéter tout le code à chaque fois.
.radius
, comme.radius, .another, .element{/* css*/}
. Cela vous fera économiser du code supplémentaire, mais le rendra peut-être moins lisible.Réponses:
Non, vous ne pouvez pas référencer un ensemble de règles à partir d'un autre.
Vous pouvez, cependant, réutiliser les sélecteurs sur plusieurs ensembles de règles dans une feuille de style et utiliser plusieurs sélecteurs sur un seul ensemble de règles (en les séparant par une virgule ).
Vous pouvez également appliquer plusieurs classes à un seul élément HTML (l'attribut class prend une liste séparée par des espaces).
Chacune de ces approches devrait résoudre votre problème.
Cela aiderait probablement si vous utilisiez des noms de classe qui décrivent pourquoi un élément doit être stylé au lieu de la manière dont il doit être stylé. Laissez le comment dans la feuille de style.
la source
fieldset legend
verslabel.legend
. Je comprends mais regrette..someDiv.other{/*style...*/}
cette façon, seuls les éléments qui ont les deux classes sont affectésVous ne pouvez pas à moins d'utiliser une sorte de CSS étendu tel que SASS . Cependant, il est très raisonnable d'appliquer ces deux classes supplémentaires à
.someDiv
.Si
.someDiv
est unique, je choisirais également de lui donner un identifiant et de le référencer en css en utilisant l'identifiant.la source
Si vous êtes prêt et capable d'utiliser une petite jquery, vous pouvez simplement le faire:
Si vous avez un javascript qui traite déjà la page ou vous pouvez le mettre quelque part dans les balises <script> Si tel est le cas, enveloppez ce qui précède dans la fonction Document prêt:
Je suis récemment tombé sur cela lors de la mise à jour d'un plugin wordpress. Le them a été changé, ce qui utilisait beaucoup de directives "! Importantes" dans le css. J'ai dû utiliser jquery pour forcer mes styles à cause de la décision géniale de déclarer! Important sur plusieurs balises.
la source
Vous pouvez facilement le faire avec le pré-processeur SASS en utilisant @extend.
Sinon, vous pouvez également utiliser JavaScript (jQuery):
Le plus simple est bien sûr d'ajouter plusieurs classes directement dans le HTML
la source
Ajoutez simplement les classes à votre html
la source
J'ai eu ce problème hier. La réponse de @ Quentin est ok:
mais j'ai créé une fonction javascript pour simuler l'héritage en css (comme .Net):
et css équivalent:
et HTML équivalent:
Je l'ai testé et travaillé pour moi, même si les règles sont dans différents fichiers css.
la source
Vous pouvez utiliser la fonction var () .
Exemple:
la source