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

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

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

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

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

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

.composite 
{
   .something;
   .else
}

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

 Joel Martinez02 дек. 2009 г., 23:14
 blu30 июн. 2009 г., 21:15
больше думать о каскадировании, чем о наследовании, это здесь не применимо

Ответы на вопрос(28)

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

p.SubTitle p.Title
{
   font-size: 12px;
}
 29 авг. 2015 г., 13:38
@YWE: Значит ли это, что декларации должны быть наоборот, по сравнению с тем, что написано в этом ответе (по крайней мере, если мы хотим, чтобы пример был иллюстративным)? Если преобладает последний,font-size: 16px никогда не может вступить в силу, верно?
 18 дек. 2011 г., 20:02
Итак, что будет в результатеfont-size?
 23 мар. 2012 г., 15:14
Размер шрифта будет 12px для "p.Title" потому что он определен после первого в файле. он переопределяет первый размер шрифта.

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

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

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

..else {
  background: red
}

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

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

 14 сент. 2015 г., 20:24
@PavelGatnar Вы можете повторно использовать определения.something а также.else в других определениях CSS.
 11 сент. 2015 г., 21:58
Какова добавленная стоимость по сравнению с этим?.composite,.something { display:inline } а также.composite,.else { background:red }

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

composite.something, composite.else
{
    blblalba
}

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

пределите) атрибуты снова.

/*  ------------------------------------------------------------------------------ */   
/*  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;
}
 01 мар. 2016 г., 19:05
Это было именно то, что я искал. Не стоит ли этот же подход работать с CSS-селекторами? Вместо указанияh1, h2, etc Вы могли бы указать.selector1, .selector2, .etc
 12 дек. 2014 г., 13:23
Это очень близко к идеальному решению, я надеюсь, что люди не откажутся от него только потому, что у него мало голосов. На самом деле, одна из самых сложных проблем, связанных с «наследованием CSS»; заключается в том, что вы обычно получаете уже созданное огромное веб-программное обеспечение (например, программное обеспечение для электронной коммерции или блог, известное PHP), и они используют код PHP, который изначально не добавит несколько классов к HTML-элементам, которые они выходят. Это заставляет вас ходить по кругу и связываться с исходным кодом (теряя изменения, если вы обновитесь позже), чтобы заставить его выводить эти дополнительные классы. При таком подходе вы редактируете только CSS-файл!

чем LESS, проверьте PPWizard:

http://dennisbareis.com/ppwizard.htm

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

 14 сент. 2015 г., 20:28
Хорошо, что он совместим с Windows 3.1 до XP, смеется
 06 сент. 2013 г., 21:09
Да, веб-сайт отвратителен, но это не только это. Его трудно читать, и у меня тоже болит голова!
 08 мар. 2017 г., 21:57
Странный нестандартный инструмент, не похожий.
 02 авг. 2012 г., 20:52
Веб-сайтis действительно отвратительно
 30 окт. 2012 г., 10:35
Какая-то ирония на сайте для HTML-процессора!

.composite,
.something { display:inline }

.composite,
.else      { background:red }
 19 нояб. 2013 г., 18:53
Почему это отстой? это кажется очень хорошим Я не могу понять разницу между символом запятой и решением less.js.
 25 мар. 2014 г., 09:15
 31 окт. 2017 г., 19:58
Это должен быть исключенный ответ.
 12 окт. 2012 г., 12:08
Это отстой, но я рад, что у нас, по крайней мере, есть это!
 06 авг. 2015 г., 13:52
Это был правильный ответ, потому что он ответил на вопрос, используя чистый синтаксис CSS. Тем не менее, ответ лучше знать.

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

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

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

h php. ...

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

...

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

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

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

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

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

Стиль "еще" переопределит (или добавит) стиль & quot; что-то & quot;

 11 сент. 2015 г., 22:01
Для всех стилей в 1 файле есть решение, похожее на наследование в CSS, см. Мой пост.

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

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

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

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

Увидетьhttp://jsfiddle.net/qj76455e/1/

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

 11 сент. 2015 г., 21:15
@mousey уточнен
 11 сент. 2015 г., 21:08
это не наследование, это применение тех же стилей к списку из трех классов, которые вы позже добавите. Это может быть полезным обходным путем в некоторых ситуациях.

кто не удовлетворен упомянутыми (отличными) постами, вы можете использовать свои навыки программирования, чтобы создать переменную (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 }

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

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

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

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

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

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

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

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

 18 нояб. 2016 г., 15:27
На самом деле это имеет ...
 18 нояб. 2016 г., 15:18
Этот подход уже был предложен в @ DHoover'sanswer с 2013 года.

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

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

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

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

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

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

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

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

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

 11 сент. 2015 г., 22:06
Лучше создавать CSS-определения, подобные наследованию, а не использовать всю цепочку классов композиции, см. Мой пост.

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

 04 янв. 2017 г., 20:23
да, это (первая часть) было моим ожиданием, когда я впервые услышал о CSS еще в 20-м веке ... и у нас все еще его нет, они сжигают производительность на некоторых динамических вещах, в то время как это может быть статически скомпоновано непосредственно перед применением CSS и это заменяет потребность в переменных (статические «переменные»)
Решение Вопроса

МЕНЬШЕ, которые позволяют вам создавать 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;
}
 01 июл. 2009 г., 20:42
Меньше - это красиво и заманчиво ... но я не очень успешно использовал его с CSSEdit в том же рабочем процессе - так что я еще не полностью его принял.
 02 окт. 2009 г., 10:48
Да, это довольно мило, не так ли? Я действительно работал над портом .NET здесь:nlesscss.codeplex.com.
 24 авг. 2011 г., 21:57
в случае, если вы достигнете этого через Google: порт .Net сейчасhere
 30 июн. 2009 г., 21:55
Да, я тоже в мире ASP.NET, поэтому я не перенес его в свой рабочий процесс.
 Joel Martinez30 июн. 2009 г., 21:52
вау, LESS в значительной степени именно то, что я ищу ... это позор, что он не поддерживается изначально, и что он написан на Ruby (я использую ASP.NET MVC)

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

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

 09 апр. 2013 г., 13:50
Мне нравится идея использовать чистый CSS (вместо LESS) для решения этой проблемы.
 23 февр. 2012 г., 20:17
Знаете ли вы, какой класс преобладает, последние или первые, и безопасно ли поведение кросс-браузера? Скажем, у нас есть.firstClass {font-size:12px;} .secondClass {font-size:20px;} будет окончательнымfont-size быть12px или же20px и это кросс-браузер безопасно?
 11 янв. 2014 г., 07:38
Мне также нравится идея не вводить несколько классов несколько раз - что является O (n ^ 2) работой :)
 04 февр. 2017 г., 12:54
Что если я использую стороннюю библиотеку и хочу изменить дизайн / HTML, который она предоставляет, но не могу изменить встроенные CSS-файлы в этой библиотеке? Там мне нужно какое-то наследование в классах CSS.
 24 февр. 2012 г., 04:31
Правило с самой высокой специфичностью в отношении селектора победит. Применяются стандартные правила специфичности; в вашем примере, так как & quot; первый & quot; и "второй" имеют ту же специфику, правило, объявленное позже в CSS, победит.

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

Since super looks just like footer, but with a different font, I'll use Less's class inclusion technique (they call it a mixin) to tell it to include these declarations too:

#super {
  #footer;
  font-family: cursive;
}
 11 сент. 2015 г., 21:43
очень сложно для анализа воздействия, потому что вы создаете искусственные зависимости ...
 15 окт. 2014 г., 21:50
Просто когда я это сделаю, МЕНЬШЕ не сможет меня больше удивить ... Я понятия не имел, что вы можете импортировать форматирование из другого блока, подобного этому. Отличный совет.

то вроде этого класса = & quot; что-то еще & quot;

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>

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

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

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

div.something.else {

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

}
 31 окт. 2012 г., 23:41
я не ищу это, но это было конструктивно для меня n__n

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

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

Ваш ответ на вопрос