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

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

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

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

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

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

.composite 
{
   .something;
   .else
}

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

28 ответов


есть такие инструменты, как меньше, которые позволяют создавать 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>

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


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

.composite,
.something { display:inline }

.composite,
.else      { background:red }

элемент может иметь несколько классов:

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

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

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


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

/*  ------------------------------------------------------------------------------ */   
/*  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;
}

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

.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>

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


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

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

это найдет все элементы с классом " composite "и добавит классы" something "и" else " к элементам. Что-то вроде <div class="composite">...</div> закончится так:
<div class="composite something else">...</div>


на SCSS путь для данного примера будет чем-то вроде:

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

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

дополнительная информация, проверьте основы sass


Не забудьте:

div.something.else {

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

}

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

в 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:

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

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

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

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

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

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

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

если у вас, например .umbrellaClass что "наследует" от .baseClass1 и .baseClass2 у вас может быть некоторый JavaScript, который срабатывает на готовом.

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

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

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

отстой css не имеет собственного наследования, хотя.


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

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

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

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

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


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


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

но дело не в этом. Я понял твой вопрос о наследстве. Дело в том, что наследование в CSS выполняется не через классы, но через иерархии элементов. Поэтому для моделирования унаследованных признаков вам нужно применить их к различным уровням элементов в DOM.


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

Это своего рода конкурент меньше.


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

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

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

промежуток с классом "myclass" будет иметь оба свойства.

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

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

стиль " else "переопределит (или добавит) стиль"something"


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

composite.something, composite.else
{
    blblalba
}

это внезапно сработало для меня:)


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

проверить Larsenal на использование менее чтобы получить представление о том, что эти дополнения делать.


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

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


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

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

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

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

затем примените глобальную переменную к элементу, который вы хотите, а не сами имена классов

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

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

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

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

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

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


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

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

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


Если вы хотите более мощный текстовый препроцессор, чем меньше, проверьте PPWizard:

http://dennisbareis.com/ppwizard.htm

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


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

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

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

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


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

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


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

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

...