Est-il possible de référencer un style CSS existant à partir d'un autre style CSS en utilisant CSS ou javascript?

Si j'ai un style défini

.style1
{
   width: 140px;
}

puis-je de référence à partir d'une deuxième style?

.style2
{
   ref: .style1;
}

Ou est-il un moyen via javascript/jQuery?

--- Edit

Pour clarifier le problème, je suis en train d'appliquer quelque soit le style est défini pour un #x et n ° c .x et .c sans modifier le CSS le CSS va avoir des mises à jour qui sont hors de mon contrôle.

J'ai utilisé de la largeur, mais vraiment le style serait quelque chose de plus complexe avec la police, de la frontière et d'autres éléments de style.

Spécifier plusieurs noms de classe fonctionne lorsque le style est appliqué à une classe donc je vais marquer les réponses existantes que de réponses, mais j'ai besoin de prendre le style appliqué à un identifiant et d'appliquer aussi à un style de classe ... si cela a un sens.

source d'informationauteur JTew

  1. 13

    Il n'y a aucun moyen de le faire avec du CSS -- c'est une fonctionnalité souvent demandée, mais non inclus dans la spécification encore. Vous aussi vous ne pouvez pas le faire directement avec le JS, mais il y a une sorte de hacky solution de contournement:

    $('.style2').addClass ('style1');
  2. 7

    vous pouvez obtenir la même fonctionnalité en permettant que des éléments d'hériter de plusieurs styles. ex.

    <p class="style1 style2">stuff</p>

    et puis votre css pourrait inclure, par exemple:

    .style1 {width:140px;}
.style2 {height:140px;}

    edit: en fait robert réponse pourrait mieux appréhender la méthode que vous essayez d'atteindre

    .style1, .style2 {width: 140px;}
.style2 {height: 140px;}

<p class="style2">i will have both width and height applied</p>
  3. 5

    Une manière d'utiliser le même code pour plusieurs blocs est la suivante:

     .style1, .style2 { width: 140px; }
  4. 2

    Un autre moyen est d'utiliser un pré-traitement est un outil, comme de moins en moins et sass. Puis, après que vous compilez le less/sass fichier, il en résulte que la normale css.

    Voici la documentation de moins et sass.

    //example of  LESS

#header {
h1 {
  font-size: 26px;
  font-weight: bold;
  }
p { font-size: 12px;
  a { text-decoration: none;
    &:hover { border-width: 1px }
    }
  }
}


/* Compiled CSS */

#header h1 {
  font-size: 26px;
  font-weight: bold;
}
#header p {
  font-size: 12px;
}
#header p a {
  text-decoration: none;
}
#header p a:hover {
 border-width: 1px;
}
  5. 1

    Certaines options:

    1. Générer votre CSS dynamiquement, soit à la volée ou que vous êtes la création de vos feuilles de style (j'utilise un des macros Visual Studio pour mettre en œuvre des constantes pour les polices de caractères, des nombres et des couleurs, et de calculer la lumière/obscurité de teintes de couleurs). Ce sujet a été beaucoup discuté ailleurs sur ce site.

    2. Si vous avez un certain nombre de styles qui sont 140px large et que vous voulez avoir la possibilité de changer de dimension pour l'ensemble de ces styles, vous pourriez faire ceci: 

      div.FixedWidth {width:140px;}
div.Style1 {whatever}
div.Style2 {whatever}

    et

        <div class="Style1 FixedWidth">...</div>
    <div class="Style2 FixedWidth">...</div>
  6. 1

    Parlez-vous d'obtenir toutes les valeurs de styles de jeu sur un Élément en particulier et d'application de celles-ci à un deuxième Élément?

    Si c'est le cas, je pense que vous allez avoir besoin de parcourir un Élément est calculée à l'aide de styles et de les appliquer ensuite à d'autres Éléments " cssText propriétés à les définir comme des styles en ligne.

    Quelque chose comme:

    el = document.getElementById('someId');
var cStyle = '';
for(var i in el.style){
  if(el.style[i].length > 0){ cStyle += i + ':' + el.style[i] + ';';
}
$('.someClass').each(function(){ this.style.cssText = cStyle; });

    Si vous savez que vous allez seulement d'être en contact avec un ensemble fini de propriétés CSS, vous pouvez simplifier le ci-dessus que:

    el = $('#someId');
var styleProps = {'border-top':true,'width':true,'height':true};
var cStyle = '';
for(var i in styleProps){
  cStyle += styleProps[i] + ':' + el.style(styleProps[i]) + ';';
}
$('.someClass').each(function(){ this.style.cssText = cStyle; });

    Je vais avertissement le code ci-dessus avec le fait que je ne suis pas sûr de savoir si ou non le S sera de retour un Objet CSSStyleDeclaration pour un HTMLElement de la propriété de style comme Mozilla (premier exemple). Aussi je n'ai pas donné ci-dessus un test, donc compter sur elle comme une pseudo-code.

  7. 0

    J'ai essayé la même chose et trouvé cette page (ainsi que quelques autres). Il n'y a pas un moyen DIRECT pour ce faire. C'est à dire:

    <html><head><title>Test</title><style>
.a { font-size: 12pt; }
.b { font-size: 24pt; }
.c { b }
</style></head><body>
<span class='c'>This is a test</span></body></html>

    Ne PAS travail. Le problème ici c'est que vous (comme moi) sont en train de faire des choses dans une logique de mode. (ie: Un puis B puis C)

    Comme d'autres l'ont souligné - cela ne fonctionne tout simplement pas. Bien qu'il DOIT travailler et CSS DOIT avoir beaucoup d'autres fonctionnalités. Il n'a pas de sorte que vous avez à faire un travail autour de. Certains ont déjà posté le jQuery moyen de contourner cela, mais ce que vous voulez PEUT être réalisé avec une légère modification.

    <html><head><title>Test</title><style>
.a { font-size: 12pt; }
.b,.c { font-size: 24pt; }
</style></head><body>
<span class='c'>This is a test</span></body></html>

    Cela permet d'obtenir le même effet, mais pas de la même façon. Au lieu d'essayer d'attribuer "a" ou "b" à "c" - juste assigner "c" à "a" ou "b". Vous obtenez le même effet, sans que cela n'affecte le reste de votre code.

    La question suivante qui devrait de la pop dans votre esprit est: "puis-je faire cela pour de multiples CSS des éléments. (Comme font-size, font-weight, font-family?) La réponse est OUI. Il suffit d'ajouter le ",.c" sur chacune des choses que vous voulez être une partie de et tous de ces "pièces" va devenir une partie de ".c".

    <html>
<head>
<title>Test</title>
<style>
.a  { font-size: 12pt; }
.b,.c   { font-size: 24pt; }
.d  { font-weight: normal; }
.e,.c   { font-weight: bold; }
.f  { font-family: times; }
.g,.c   { font-family: Arial; }
</style>
</head>
<body>
<span class='c'>This is a test</span>
</body>
</html>