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

Question

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

.style1
{
   width: 140px;
}

Могу ли я сослаться на это из второго стиля?

.style2
{
   ref: .style1;
}

Или есть способ через javascript / jQuery?

--- Редактировать

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

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

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

Answer 1

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

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

Answer 2

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

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

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

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

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

.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

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

Вот документация минус и 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 5

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

Если это так, я думаю, что вам нужно будет перебирать вычисленные стили одного элемента, а затем применять их к свойствам 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

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

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

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

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

и

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

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-затем-B-затем-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 (например, font-size, font-weight, font-family?). Ответ ДА. Просто добавьте», .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>