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

Если у меня есть определенный стиль

.style1
{
   width: 140px;
}

Можно ли ссылаться на него со второго стиля?

.style2
{
   ref: .style1;
}

Или есть способ с помощью javascript/jQuery?

--- Изменить

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

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

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

Ответы

Ответ 1

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

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

Ответ 2

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

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

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

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

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

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

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

Ответ 3

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

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

Ответ 4

Другой способ - использовать инструмент предварительной обработки, например, меньше и дешево. Затем, после того как вы скомпилируете файл 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;
}

Ответ 5

Некоторые параметры:

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

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

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

и

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

Ответ 6

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

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

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

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 (первый пример). Я также не дал вышеописанный тест, поэтому полагаюсь на него только как псевдокод.

Ответ 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 "часть на каждую из вещей, которые вы хотите, чтобы она была частью, и все эти" части "станут частью".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>