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

Question

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

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

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

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

.something { display:inline }

.else      { background:red }

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

.composite 

{

   .something;

   .else

}

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

525 28

css

28 ответов:

Comments

Ничего не найдено.

Larsenal · Accepted Answer · 2015-12-09 11:24:20

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

Matt Bridges · Accepted Answer · 2011-10-21 04:27:20

вы можете добавить несколько классов к одному элементу DOM, например,
<div class="firstClass secondClass thirdclass fourthclass"></div>
наследование не является частью стандарта CSS.

mlouro · Accepted Answer · 2015-12-09 11:23:43

да, но не совсем с таким синтаксисом.
.composite,
.something { display:inline }

.composite,
.else      { background:red }

Sampson · Accepted Answer · 2014-08-08 14:06:00

элемент может иметь несколько классов:
.classOne { font-weight: bold; }
.classTwo { font-famiy:  verdana; }

<div class="classOne classTwo">
  <p>I'm bold and verdana.</p>
</div>
и это о так близко, как вы собираетесь получить к сожалению. Я хотел бы увидеть эту функцию, а также псевдонимы классов когда-нибудь.

user2990362 · Accepted Answer · 2015-12-09 11:26:16

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

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

jitter · Accepted Answer · 2015-12-09 11:25:04

нет, вы не можете сделать что-то вроде
.composite 
{
   .something;
   .else
}
это не имена "классов" в смысле OO. .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 и color наследуются от настроек в прилагаемом div, который является .foo стиле. Возможно, вам придется проверьте точную спецификацию W3C. inherit по умолчанию для большинства свойств, но не для всех.

DHoover · Accepted Answer · 2013-10-24 00:52:06

я столкнулся с этой же проблемой и в конечном итоге использовал решение JQuery, чтобы создать впечатление, что класс может наследовать другие классы.
<script>
    $(function(){
            $(".composite").addClass("something else");
        });
</script>
Это позволит найти все элементы с классом " composite "и добавить классы" something "и" else " к элементам. Что-то вроде <div class="composite">...</div> закончится так:
<div class="composite something else">...</div>

Alter Lagos · Accepted Answer · 2016-02-05 21:59:11

на SCSS способ для данного примера будет что-то вроде:
.something {
  display: inline
}
.else {
  background: red
}

.composite {
  @extend .something;
  @extend .else;
}
дополнительная информация, проверьте основы sass

Ryan Florence · Accepted Answer · 2015-12-09 11:26:34

Не забудьте:

div.something.else {

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

}

electricalbah · Accepted Answer · 2016-02-05 21:58:53

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

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>

pedrofernandes · Accepted Answer · 2015-12-09 11:26:27

в файле Css:

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

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

RichieHindle · Accepted Answer · 2015-12-09 11:26:47

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

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

John Carrell · Accepted Answer · 2016-11-18 16:13:24

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

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

если у вас, например .umbrellaClass что "наследует" от .baseClass1 и .baseClass2 вы могли бы иметь некоторые JavaScript, который срабатывает на готов.
$(".umbrellaClass").addClass("baseClass1");
$(".umbrellaClass").addClass("baseClass2");
теперь все элементы .umbrellaClass будут иметь все свойства как .baseClasss. обратите внимание, что, как и наследование ООП,.umbrellaClass может иметь или не иметь свои собственные свойства.

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

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

LBushkin · Accepted Answer · 2009-06-30 22:20:55

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

однако к тегу в разметке можно применить более одного класса ... в этом случае существует сложный набор правил, которые определяют, какие фактические стили будут применяться браузером.
<span class="styleA styleB"> ... </span>
CSS будет искать все стили, которые могут быть применены на основе что ваша разметка, и объединить стили CSS из этих нескольких правил вместе.

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

Pete · Accepted Answer · 2009-06-30 22:13:07

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

Assaf Lavie · Accepted Answer · 2009-06-30 22:18:56

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

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

chug2k · Accepted Answer · 2011-04-27 10:40:35

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

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

Philippe Leybaert · Accepted Answer · 2015-12-09 11:27:45

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

единственное, что поддерживается в CSS является более конкретным, чем другое правило:
span { display:inline }
span.myclass { background: red }
промежуток с классом "myclass" будет иметь оба свойства.

другой способ-указать два класса:
<div class="something else">...</div>
стиле "еще" будет переопределить (или добавить) в стиле "что-то"

BiBi · Accepted Answer · 2015-12-09 11:27:05

Я тоже искал это как сумасшедший, и я просто понял это, попробовав разные вещи :P... Ну вы можете сделать это так:
composite.something, composite.else
{
    blblalba
}
это вдруг сработало для меня:)

Gavin Miller · Accepted Answer · 2017-05-23 15:03:02

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

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

Zack The Human · Accepted Answer · 2009-06-30 22:43:47

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

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

Shakir · Accepted Answer · 2015-04-18 10:59:17

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

Это лучший хак, который я мог придумать.
<style>
.red { color: red; }
.bold { font-weight: bold; }
</style>

<? define('DANGERTEXT','red bold'); ?>
затем примените глобальную переменную к элементу, который вы хотите, а не к самим именам классов
<span class="<?=DANGERTEXT?>"> Le Champion est Ici </span>

hydrix · Accepted Answer · 2016-03-18 01:52:19

в определенных обстоятельствах вы можете сделать "мягкое" наследование:
.composite
{
display:inherit;
background:inherit;
}

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

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

Stryderunknown · Accepted Answer · 2016-09-14 19:58:29

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

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

BloDoe · Accepted Answer · 2010-11-29 01:32:31

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

http://dennisbareis.com/ppwizard.htm

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

Pavel Gatnar · Accepted Answer · 2015-09-11 22:49:50

вы можете достичь наследования, как поведение таким образом:
.p,.c1,.c2{...}//parent styles
.c1{...}//child 1 styles
.c2{...}//child 2 styles
см.http://jsfiddle.net/qj76455e/1/

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

Nesha Zoric · Accepted Answer · 2018-03-13 12:35:17

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

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

john · Accepted Answer · 2014-08-04 19:23:58

вы можете достичь того, что вы хотите, если вы предварительно обработаете ваш .css файлы через php. ...
$something='color:red;'
$else='display:inline;';
echo '.something {'. $something .'}';
echo '.else {'. $something .'}';
echo '.somethingelse {'. $something  .$else '}';
...