Есть ли способ ссылаться на существующий стиль CSS из другого стиля CSS, используя CSS или javascript?

Question

Если я стиль определен

.style1 
{ 
    width: 140px; 
} 

я могу ссылаться на него из второго стиля?

.style2 
{ 
    ref: .style1; 
} 

Или есть способ использования javascript/jQuery?

--- Edit

Для выяснения вопроса, я пытаюсь применить любой стиль определен для #x и #c к .x и .c без изменения CSS как CSS будет иметь обновления, которые не поддаются контролю.

Я использовал ширину, но на самом деле стиль был бы чем-то более сложным с указанием шрифта, границы и других элементов стиля.

Задание нескольких имен классов работает, когда стиль применяется к классу, поэтому я буду отмечать существующие ответы как ответы, но мне нужно применить стиль к идентификатору, а также применить его к стилю класса. .. если это имеет смысл.

Answer 1

Невозможно сделать это с помощью CSS - это часто запрашиваемая функция, но пока не включена в спецификацию. Вы также не можете сделать это прямо с JS, но есть своего рода Hacky обходной путь:

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

Answer 2

вы можете достичь того же функциональные возможности, что позволяет элементам наследовать несколько стилей. ех.

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

, а затем ваш CSS будет включать в себя, например:

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

редактировать: на самом деле ответ Робера может лучше приблизить метод, который вы пытаетесь достичь

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

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

Answer 3

Один из способов использовать один и тот же код для нескольких блоков:

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

Answer 4

Некоторые опции:

1. Сформировать свой CSS динамически, либо на лету или как вы авторинга таблицы стилей (я использую визуальные макросы Studio, чтобы реализовать константы для шрифтов, цифр и цветов - и в вычислять светлые/темные оттенки цветов). Эта тема много обсуждалась в другом месте на этом сайте.

2. Если у вас есть несколько стилей, которые 140px в ширину, и вы хотите, чтобы иметь гибкость изменения, что размер для всех этих стилей, вы можете сделать это:

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

и

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

Answer 5

Вы говорите о получении всех вычисленных стилей, установленных на конкретном Элементе, и применении их ко второму Элементу?

Если это так, я думаю, вам понадобится выполнить итерацию с помощью вычисляемых стилей Element, а затем применить их к другим свойствам cssText элемента, чтобы установить их как встроенные стили.

Что-то вроде:

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

Если вы знаете, что вы будете иметь дело только с конечным набором свойств CSS, можно упростить выше, как:

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

Я РИСКОВАННАЯ приведенный выше код с тем фактом, что я не уверен, вернут ли IE объект CSSStyleDeclaration для свойства стиля HTMLElement, например Mozilla (первый пример). Я также не дал вышеуказанный тест, поэтому полагаюсь на него только как псевдокод.

Answer 6

Другой способ - использовать инструмент предварительной обработки, например, меньше и дешево. Затем, после того как вы скомпилируете файл less/sass, он будет выглядеть как обычный css.

Настоящая документация содержит less и 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

Я пытался эту же вещь и нашел эту веб-страницу (как и некоторые другие). Существует НЕ ПРЯМОЙ способ сделать это. 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> 

ли НЕ работу. Проблема здесь в том, что вы (как я) пытаемся сделать что-то логично. (то есть: A-then-B-then-C)

Как указывали другие, это просто не работает. Хотя это СЛЕДУЕТ работать, и CSS ДОЛЖЕН иметь много других функций. Это не значит, что вам нужно работать. Некоторые уже опубликовали способ jQuery, чтобы обойти это, но то, что вы хотите, может быть достигнуто с небольшой модификацией.

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

Это обеспечивает такой же эффект - только по-другому. Вместо того, чтобы пытаться назначить «a» или «b» на «c» - просто назначьте «c» «a» или «b». Вы получаете такой же эффект, не затрагивая остальную часть вашего кода.

Следующий вопрос, который должен появиться в вашем уме: «Могу ли я сделать это для нескольких элементов CSS. (Например, размер шрифта, шрифт-вес, шрифт-семья?) Ответ: ДА. с «часть на каждую из вещей, которые вы хотите, чтобы это было частью и все эти„части“станет частью» .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>