Может ли класс CSS наследовать один или несколько других классов?

Я чувствую себя глупо из-за того, что так долго работал веб-программистом и не знал ответа на этот вопрос, я на самом деле надеюсь, что это возможно, и я просто не знал, а то, что я думаю, является ответом (а это то, что это невозможно) ,

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

Например, скажем, у нас было:

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

Я хотел бы сделать что-то вроде этого:

.composite 
{
   .something;
   .else
}

где класс .composite будет отображаться как встроенный и иметь красный фон

Существуют такие инструменты, как LESS , которые позволяют вам создавать CSS на более высоком уровне абстракции, аналогично тому, что вы описываете.

Меньше называет эти "миксины"

Вместо

/* CSS */

#header {
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  border-radius: 8px;
}

#footer {
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  border-radius: 8px;
}

Ты мог бы сказать

/* LESS */

.rounded_corners {
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  border-radius: 8px;
}

#header {
  .rounded_corners;
}

#footer {
  .rounded_corners;
}

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

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

Правила, данные в более поздних классах (или более конкретные), переопределяют. Таким образом, fourthclassв этом примере вид преобладает.

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

Да, но не совсем с этим синтаксисом.

.composite,
.something { display:inline }

.composite,
.else      { background:red }

Держите ваши общие атрибуты вместе и назначьте определенные (или переопределите) атрибуты снова.

/*  ------------------------------------------------------------------------------ */   
/*  Headings */ 
/*  ------------------------------------------------------------------------------ */   
h1, h2, h3, h4
{
    font-family         : myfind-bold;
    color               : #4C4C4C;
    display:inline-block;
    width:900px;
    text-align:left;
    background-image: linear-gradient(0,   #F4F4F4, #FEFEFE);/* IE6 & IE7 */
}

h1  
{
    font-size           : 300%;
    padding             : 45px 40px 45px 0px;
}

h2
{
    font-size           : 200%;
    padding             : 30px 25px 30px 0px;
}

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

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

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

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

Нет, ты не можешь сделать что-то вроде

.composite 
{
   .something;
   .else
}

Это не «классовые» имена в ОО-смысле. .somethingи .elseпросто селекторы не более того.

Но вы можете указать два класса для элемента

<div class="something else">...</div>

или вы можете посмотреть в другую форму наследования

.foo {
  background-color: white;
  color: black;
}

.bar {
  background-color: inherit;
  color: inherit;
  font-weight: normal;
}

<div class="foo">
  <p class="bar">Hello, world</p>
</div>

Где цвет фона и абзацы унаследованы от настроек во вложенном div, который .fooстилизован. Возможно, вам придется проверить точную спецификацию W3C. inheritпо умолчанию для большинства свойств, но не для всех.

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

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

Это найдет все элементы с классом «составной» и добавит классы «что-то» и «еще» к элементам. Так что-то вроде <div class="composite">...</div>будет в итоге так:
<div class="composite something else">...</div>

Способ SCSS для данного примера будет примерно таким:

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

.composite {
  @extend .something;
  @extend .else;
}

Больше информации, проверьте основы Sass

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

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>

Не забывайте:

div.something.else {

    // will only style a div with both, not just one or the other

}

В Css файле:

p.Title 
{
  font-family: Arial;
  font-size: 16px;
}

p.SubTitle p.Title
{
   font-size: 12px;
}

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

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

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

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

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

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

Отстой CSS не имеет наследства, хотя.

Идеальное время : я перешел от этого вопроса к своей электронной почте, чтобы найти статью о Less , библиотеке Ruby, которая, помимо прочего, делает это:

Поскольку super выглядит так же footer, но с другим шрифтом, я буду использовать технику включения класса Less (они называют это mixin), чтобы сказать, чтобы она также включала эти объявления:

#super {
  #footer;
  font-family: cursive;
}

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

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

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

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

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

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

Это своего рода конкурент LESS.

Это невозможно в CSS.

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

span { display:inline }
span.myclass { background: red }

Пролет с классом «myclass» будет иметь оба свойства.

Другой способ - указать два класса:

<div class="something else">...</div>

Стиль «else» переопределяет (или добавляет) стиль «что-то»

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

Как уже говорили другие, вы можете добавить несколько классов к элементу.

Но дело не в этом. Я получил ваш вопрос о наследовании. Суть в том, что наследование в CSS осуществляется не через классы, а через иерархии элементов. Поэтому для моделирования унаследованных черт вам необходимо применять их к различным уровням элементов в DOM.

Я искал это как сумасшедший, и я просто понял это, попробовав разные вещи: P ... Ну, вы можете сделать это так:

composite.something, composite.else
{
    blblalba
}

У меня вдруг сработало :)

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

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

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

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

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

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

Можно использовать класс (или идентификатор) для родительского тега, а затем использовать 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 таким способом. (Например, изменение типов оформления текста).

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

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

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

Ознакомьтесь с ответом Ларсенала об использовании LESS, чтобы понять, что делают эти дополнения.

CSS на самом деле не делает то, что вы просите. Если вы хотите написать правила с учетом этой составной идеи, вы можете проверить компас . Это фреймворк таблиц стилей, который похож на уже упомянутый Less.

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

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

Это лучший взлом, который я мог придумать.

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

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

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

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

Посмотрите на CSS compose : https://bambielli.com/til/2017-08-11-css-modules-composes/

согласно им:

.serif-font {
    font-family: Georgia, serif;
}

.display {
    composes: serif-font;
    font-size: 30px;
    line-height: 35px;
}

Я использую это в своем реактивном проекте.

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

.foo, .bar { font-weight : bold; font-size : 2em; /* attribute class A */}
.foo { color : green; /* attribute class B */}

Когда элемент получает атрибут class="foo", полезно думать об этом не как наследование атрибутов из класса .foo, но из атрибута класса А и класса B атрибут . Т.е. граф наследования имеет один уровень вглубь, элементы выводятся из классов атрибутов , а селекторы указывают, куда идут ребра, и определяют приоритет при наличии конкурирующих атрибутов (аналогично порядку разрешения метода).

Практическое значение для программирования заключается в следующем. Допустим, у вас есть таблица стилей, приведенная выше, и вы хотите добавить новый класс .baz, где он должен быть таким же, font-sizeкак и .foo. Наивное решение было бы так:

.foo, .bar { font-weight : bold; font-size : 2em; /* attribute class A */}
.foo { color : green; /* attribute class B */}
.baz { font-size : 2em; /* attribute class C, hidden dependency! */}

Каждый раз, когда мне приходится что-то печатать дважды, я так злюсь! Мало того, что я должен написать это дважды, теперь у меня нет возможности программно указать, что .fooи .bazдолжно иметь то же самое font-size, и я создал скрытую зависимость! Моя вышеприведенная парадигма предполагает, что я должен абстрагировать font-sizeатрибут от класса атрибута A :

.foo, .bar, .baz { font-size : 2em; /* attribute base class for A */}
.foo, .bar { font-weight : bold; /* attribute class A */}
.foo { color : green; /* attribute class B */}

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

Если вам нужен более мощный текстовый препроцессор, чем LESS, проверьте PPWizard:

http://dennisbareis.com/ppwizard.htm

Предупреждение, что веб-сайт действительно отвратителен и имеет небольшую кривую обучения, но он идеально подходит для создания как CSS, так и HTML кода с помощью макросов. Я никогда не понимал, почему больше веб-кодеров не используют его.

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

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

...