Назовите один класс стиля другому?

У меня есть класс CSS, как:

.foo {
  background-color: red;
}

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

.list1 li {
  background-color: tan;
}

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

.list1 li {
  .foo;
}

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

Ответ 1

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

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

Ответ 2

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

.foo, .list1 li {
   ...
}

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

Ответ 3

Не с каким-либо синтаксисом (и не путайте "класс" (термин HTML) с "селектором классов" или "набором правил" ).

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

Ответ 4

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

http://sass-lang.com/

http://lesscss.org/

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

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

Ответ 5

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

.foo,
.li,
.whatever
{styles}

Возможно, у кого-то есть другое предложение.

Ответ 6

Нет, вы не можете, но вы можете переопределить это, используя, например, именование разных классов

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

class ="list1 foo"

Ответ 7

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

Ответ 8

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

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

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

Ответ 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>

Ответ 10

У меня есть небольшое решение @Frank Carnovale (без изменения css). После загрузки страницы:

$(function () {
   $('.list li').removeClass('old1 old2 ...')
   $('.list li').toggleClass('foo1 foo2 ...')
}

См. также . Переопределяет ли addClass в JQuery какие-либо существующие стили на основе классов CSS?