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

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

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

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

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

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

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

Диапазон с классом "myclass" будет иметь оба свойства.

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

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

Стиль " else "переопределит (или добавит) стиль" чего-то "

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

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

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

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

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

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

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

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

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

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

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

В файле Css:

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

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

Не забудьте:

div.something.else {

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

}

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

.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. Наследование в любом случае используется по умолчанию для большинства свойств, но не для всех.

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

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

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

Yes, but not exactly with that syntax.

.composite,
.something { display:inline }

.composite,
.else      { background:red }