Указать один класс стиля на другой?

Question

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

.foo {
  background-color: red;
}

, тогда у меня есть класс, указанный для списка:

.list1 li {
  background-color: tan;
}

можно ли установить один класс стиля, чтобы он просто указывал надругой?Что-то вроде:

.list1 li {
  .foo;
}

не знаю, как это сформулировать - я просто хочу, чтобы стиль .list li был тем, что я определяю для класса .foo.

Answer 1

Вы можете использовать группировку селекторов :

.foo, .list1 li { 
  background-color: red; 
} 

Answer 2

Нет. Лучшее, что вы можете сделать с «нативным CSS» - это использовать множественный селектор:

.foo, .list1 li {
   ...
}

В противном случае есть препроцессоры, которые могут помочь с этим, такие как SASS .

Answer 3

Не с любым подобным синтаксисом (и не путайте «класс» (термин HTML) с «селектором класса» или «набором правил»).

Ваши варианты несколько классов, группировка селекторов или предварительная обработка .

Answer 4

Возможно, вы захотите заглянуть в препроцессор CSS, например, SASS или LESS. Вы можете определить переменные, которые могут использоваться в вашем коде. Это значительно ускоряет кодирование, когда вы знакомы с ним.

http://sass -lang.com /

http://lesscss.org/

Использование SASS:

$darkred : #841c14;
.box { 
    background: $darkred;
}

Answer 5

Нет, вы не можете, но вы можете переопределить его с помощью именования различных классов, например

.foo {
  background-color: red;
}
.list1 li {
   background-color: tan;
}

class ="list1 foo"

Answer 6

Афаик, это невозможно (пока) Я надеюсь, что это будет в будущем.Я всегда просто копирую + вставляю все, что хочу, чтобы они были одинаковыми, в нужный селектор или помещаю имена селекторов один за другим:

.foo,
.li,
.whatever
{styles}

Может быть, у кого-то еще есть другое предложение.

Answer 7

Наследование, насколько я знаю, не поддерживается в CSS (как минимум 2.1)

Answer 8

Вышеуказанные решения недоступны, если вы не контролируете, как было определено «foo».

Итак, если решение JQuery приемлемо, просто примените исходный класс ко всем экземплярам нового класса / контекста.В этом случае:

$('.list li').addClass('foo')

Answer 9

, чтобы помочь прояснить, что означает переопределение, если вы хотите .list1 li нести все стили foo, но просто хотите изменить его цвет на tan, я бы сделал это:

<span class = "foo">
  <span class = "list1"><!--or whatever name you have for your new style-->
    TEXT WITH INHERITED STYLE GOES HERE
  </span>
</span>