Передача свойств от родительского к дочернему с & amp; оператор [дубликат]

Также есть SASS, который вы можете найти в http://sass-lang.com/ . Существует тег @extend, а также система типа микширования. (Ruby)

Это своего рода конкурент МЕНЬШЕ.

На самом деле то, что вы просите, существует, но это делается как дополнительные модули. Посмотрите этот вопрос на Better CSS в .NET для примеров.

Проверьте ответ Larsenal на использование LESS , чтобы понять, ons сделать.

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

<script>
    $(function(){
            $(".composite").addClass("something else");
        });
</script>

Это найдет все элементы с классом «композитный» и добавьте к элементам классы «что-то» и «еще». Итак, что-то вроде <div class="composite">...</div> закончится так: <div class="composite something else">...</div>

В определенных обстоятельствах вы можете выполнить «мягкое» наследование:

.composite
{
display:inherit;
background:inherit;
}

.something { display:inline }
.else      { background:red }

Это работает только в том случае, если вы добавляете класс .composite к дочернему элементу. Это «мягкое» наследование, потому что любые значения, не указанные в .composite, явно не наследуются. Имейте в виду, что все равно было бы меньше символов просто писать «inline» и «red» вместо «inherit».

Вот список свойств и независимо от того, делают они это автоматически: https://www.w3.org/TR/CSS21/propidx.html

Лучшее, что вы можете сделать, это

CSS

.car {
  font-weight: bold;
}
.benz {
  background-color: blue;
}
.toyota {
  background-color: white;
}

HTML

<div class="car benz">
  <p>I'm bold and blue.</p>
</div>
<div class="car toyota">
  <p>I'm bold and white.</p>
</div>

Вы можете достичь того, чего хотите, если предварительно обрабатываете свои .css-файлы через php. ...

$something='color:red;'
$else='display:inline;';
echo '.something {'. $something .'}';
echo '.else {'. $something .'}';
echo '.somethingelse {'. $something  .$else '}';

...

Я понимаю, что этот вопрос сейчас очень старый, но здесь нет ничего!

Если целью является добавление одного класса, который подразумевает свойства нескольких классов, в качестве собственного решения, я бы рекомендовал использовать JavaScript / jQuery (jQuery действительно не обязательно, но, безусловно, полезно)

Если у вас есть, например, .umbrellaClass, который «наследует» от .baseClass1 и .baseClass2, у вас может быть какой-то JavaScript, который стреляет готов .

$(".umbrellaClass").addClass("baseClass1");
$(".umbrellaClass").addClass("baseClass2");

Теперь все элементы из .umbrellaClass будут иметь все свойства обоих .baseClass s. Обратите внимание, что, как и наследование ООП, .umbrellaClass может иметь или не иметь свои собственные свойства.

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

Отстой Css не имеет нативного наследования.

К сожалению, CSS не обеспечивает «наследование» так, как это делают языки программирования, такие как C ++, C # или Java. Вы не можете объявить класс CSS, а затем расширить его с помощью другого класса CSS.

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

<span class="styleA styleB"> ... </span>

CSS будет искать все стили, которые можно применить на основе вашей разметки, и объединить стили CSS из этих нескольких правил.

Как правило, стили сливаются, но когда возникают конфликты, более поздний объявленный стиль, как правило, выигрывает (если только важный атрибут не указан в одном из стилей, и в этом случае выигрывает). Кроме того, стили, применяемые непосредственно к элементу HTML, имеют приоритет над стилями класса CSS.

Вы можете добавить несколько классов к одному элементу DOM, например

<div class="firstClass secondClass thirdclass fourthclass"></div>

Наследование не является частью стандарта CSS.

Less and Sass - предварительные процессоры CSS, которые расширяют язык CSS ценными способами. Только одно из многих улучшений, которые они предлагают, - это именно тот вариант, который вы ищете. Есть несколько очень хороших ответов с Less и я добавлю решение Sass.

У Sass есть опция расширения, которая позволяет одному классу полностью перейти на другой. Подробнее о расширении вы можете прочитать в этой статье

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

.p,.c1,.c2{...}//parent styles
.c1{...}//child 1 styles
.c2{...}//child 2 styles

См. http://jsfiddle.net/qj76455e/1/

Самое большое преимущество этого подхода - модульность - вы не создаете зависимости между классами (как это происходит, когда вы «наследуете» класс с использованием препроцессора). Поэтому любой запрос на изменение CSS не требует какого-либо большого анализа влияния.

Вы можете применить более одного класса CSS к элементу чем-то вроде этого класса = "something else"

Для тех, кто не удовлетворен указанными (отличными) сообщениями, вы можете использовать свои навыки программирования, чтобы сделать переменную (PHP или любой другой), и хранить в ней несколько имен классов.

Это

<style>
.red { color: red; }
.bold { font-weight: bold; }
</style>

<? define('DANGERTEXT','red bold'); ?>

Затем примените глобальную переменную к желаемому элементу, а не к самим именам классов

<span class="<?=DANGERTEXT?>"> Le Champion est Ici </span>

Хотя прямое наследование невозможно.

Можно использовать класс (или id) для родительского тега, а затем использовать комбайны CSS для изменения поведения дочернего тега из его иерархии.

p.test{background-color:rgba(55,55,55,0.1);}
p.test > span{background-color:rgba(55,55,55,0.1);}
p.test > span > span{background-color:rgba(55,55,55,0.1);}
p.test > span > span > span{background-color:rgba(55,55,55,0.1);}
p.test > span > span > span > span{background-color:rgba(55,55,55,0.1);}
p.test > span > span > span > span > span{background-color:rgba(55,55,55,0.1);}
p.test > span > span > span > span > span > span{background-color:rgba(55,55,55,0.1);}
p.test > span > span > span > span > span > span > span{background-color:rgba(55,55,55,0.1);}
p.test > span > span > span > span > span > span > span > span{background-color:rgba(55,55,55,0.1);}

<p class="test"><span>One <span>possible <span>solution <span>is <span>using <span>multiple <span>nested <span>tags</span></span></span></span></span></span></span></span></p>

Я бы не предложил использовать так много пролетов, как пример, но это всего лишь доказательство концепции. Есть еще много ошибок, которые могут возникнуть при попытке применить CSS таким образом. (Например, изменение типов оформления текста).

Элемент может принимать несколько классов:

.classOne { font-weight: bold; }
.classTwo { font-famiy:  verdana; }

<div class="classOne classTwo">
  <p>I'm bold and verdana.</p>
</div>

И это примерно так же близко, как вы к сожалению. Мне бы хотелось увидеть эту функцию вместе с классными псевдонимами.

CSS действительно не делает то, что вы просите. Если вы хотите написать правила с этой сложной идеей, вы можете проверить compass . Это структура стилей, которая похожа на уже упомянутую «Меньшую».

Это позволяет вам делать миксины и весь этот хороший бизнес.