¿Hay alguna manera de hacer referencia a un estilo de CSS existente desde otro estilo CSS utilizando CSS o javascript?

Question

si tengo un estilo definido

.style1 
{ 
    width: 140px; 
} 

puedo hacer referencia a lo que desde un segundo estilo?

.style2 
{ 
    ref: .style1; 
} 

¿O hay alguna manera a través de javascript/jQuery?

--- Editar

Para aclarar el problema, estoy tratando de aplicar cualquier estilo se define por un #x y #C a .xy .c sin alterar la CSS como el CSS va a tener actualizaciones que están fuera de mi control.

Utilicé ancho pero realmente el estilo sería algo más complejo con la fuente, el borde y otros elementos de estilo especificados.

La especificación de varios nombres de clase funciona cuando el estilo se aplica a una clase, por lo que marcaré las respuestas existentes como respuestas, pero debo aplicar el estilo a una identificación y aplicarlo a un estilo de clase. .. Si eso tiene algún sentido.

Answer 1

No hay forma de hacerlo con CSS: es una característica muy solicitada, pero no incluida en la especificación todavía. Tampoco puede hacerlo directamente con JS, pero hay una especie de solución hacky:

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

Answer 2

se puede conseguir la misma funcionalidad al permitir que los elementos de heredar múltiples estilos. ex.

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

y luego el CSS incluiría, por ejemplo:

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

edición: en realidad la respuesta de Robert podría aproximar mejor el método que se está tratando de lograr

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

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

Answer 3

Una forma de utilizar el mismo código para varios bloques es el siguiente:

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

Answer 4

Algunas opciones:

1. generar su CSS dinámicamente, ya sea sobre la marcha o como usted está autoría de las hojas de estilo (yo uso un Visual Studio macros para poner en práctica constantes para las fuentes, los números y los colores - y a calcule los colores claros/oscuros de los colores). Este tema ha sido muy discutido en otro lugar en este sitio.

2. Si usted tiene un número de estilos que son 140px de ancho y que desea tener la flexibilidad de cambiar esa dimensión para todos los estilos, usted puede hacer esto:

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

y

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

Answer 5

¿Estás hablando de obtener todos los estilos computados establecidos en un Elemento en particular y aplicarlos a un segundo Elemento?

Si ese es el caso, creo que vas a necesitar iterar a través de los estilos computados de un Elemento usando y luego aplicarlos a las propiedades cssText de tus otros Elementos para establecerlos como estilos en línea.

Algo así como:

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 sabe que sólo va a estar tratando con un conjunto finito de propiedades CSS, se podría simplificar lo anterior como:

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; }); 

voy salvedad el código anterior con el hecho de que no estoy seguro de si los IEs devolverán un objeto CSSStyleDeclaration para una propiedad de estilo de HTMLElement como lo hará Mozilla (el primer ejemplo). Tampoco le he dado una prueba a la de arriba, así que confía en ella solo como pseudocódigo.

Answer 6

Otra forma es utilizar la herramienta de preproceso, como less y sass. Luego, después de compilar el archivo less/sass, se obtendrá como css normal.

Aquí está la documentación de less y 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; 
} 

Answer 7

Estaba intentando lo mismo y encontré esta página web (así como algunas otras). No hay una manera DIRECTA de hacer esto. IE:

<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> 

Hace NO trabajo. El problema aquí es que (como yo) estamos tratando de hacer las cosas de manera lógica. (es decir: A-then-B-then-C)

Como han señalado otros, esto simplemente no funciona. Aunque DEBERÍA funcionar y CSS DEBERÍA tener muchas otras características también. No es así, tienes que trabajar mucho. Algunos ya han publicado la forma de jQuery para evitar esto, pero lo que desea se puede lograr con una ligera modificación.

<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> 

Esto logra el mismo efecto, solo que de una manera diferente. En lugar de intentar asignar "a" o "b" a "c", simplemente asigne "c" a "a" o "b". Obtienes el mismo efecto sin que afecte al resto de tu código.

La siguiente pregunta que debe aparecer en su mente es "¿Puedo hacer esto para múltiples elementos de CSS (como font-size, font-weight, font-family?) La respuesta es SÍ. Simplemente agregue el",. c "parte en cada una de las cosas que quiere que sea una parte y todas esas 'partes' se convertirá en una parte 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>