Как я могу наследовать свойства от правила ID CSS до класса CSS?

Question

У меня есть правило класса css:

.test{ text-align:center; font-family:Verdana; }

И я хочу создать еще одно правило идентификатора (я надеюсь, что это правильно называть «правилом идентификатора»):

#divNew1{ color: Red; }
#spanNew2{ color: Green; }
#pNew3{ color: Yellow; }

У меня много элементов div. Я хочу передать свойства класса .test другим элементам только с изменением файла CSS. Вот почему я не хочу добавлять атрибут класса к элементам div. HTML-код ниже:

<div id="divNew1">Ta ta taaaaa</div>
<span id="spanNew2">Ta ta taaaaa</span>
<p id="pNew3">Ta ta taaaaa</p>

Но я хочу добавить свойства класса .test к классу #divNew, используя наследование, и я не хочу добавлять атрибут класса в div, как описано выше. Есть ли способ сделать это?

Answer 1

Просто включите класс идентификатора в верхнем объявлении, победит последнее объявление для любого свойства. Например. если бы в первом правиле было color: Green;, .test было бы зеленым, #divNew было бы красным.

.test, #divNew{ text-align:center; font-family:Verdana; }
#divNew{ color: Red; }

Answer 2

Думаю, вопрос в том, может ли мое правило "#divNew" CSS наследовать свойства существующего правила ".test", чтобы:

[Psuedo Code]

.test { color: red; }

#divNew : .test { border: 1px solid Black }

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

И ответ «нет» - нет синтаксиса для объявления наследования одного правила другим правилом - но вы можете применить несколько правил CSS к одному элементу.

В этом примере элемент будет принимать правила для "#divNew" и ".test" и ".another". Любые конфликтующие свойства будут переопределены последним правилом в вашем CSS.

<div id="#divNew" class="test another">...

Answer 3

Что вы подразумеваете под наследованием? Если в вашем HTML #divNew является потомком .test, тогда CSS-свойства .test уже унаследованы им (если вы не переопределите их, задав конкретные свойства #divNew).

Синтаксис для добавления свойств непосредственно в #divNew, который также является .test:

#divNew.test {/*properties*/}

Синтаксис для добавления свойств в #divNew, который является потомком .test:

.test #divNew {/*properties*/}

Answer 4

LESS / dotLess позволяют вам выполнять дополнительную обработку в файле CSS на стороне сервера, используя синтаксис стиля CSS. МЕНЕЕ . Я бы дал ссылку на dotLess, но в настоящее время не могу найти работающую ссылку (http://www.dotlesscss.com/ для меня пустует)

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

Или T4CSS от Фила Хаака

Answer 5

Не уверен, что понимаю вас, но:

.test{ text-align:center; font-family:Verdana; }
#divNew.test{ color: Red; }

Answer 6

<div id="divNew" class="test">Ta ta taaaaa</div>