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

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

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

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

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

Что бы я хотел сделать, это примерно так:

.composite 
{
   .something;
   .else
}

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

Ответ 1

Есть такие инструменты, как 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;
}

Ответ 2

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

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

Наследование не входит в стандарт CSS.

Ответ 3

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

.composite,
.something { display:inline }

.composite,
.else      { background:red }

Ответ 4

Сохраняйте общие атрибуты и назначайте определенные (или переопределяющие) атрибуты снова.

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

Ответ 5

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

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

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

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

Ответ 6

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

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

Ответ 7

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

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

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

Ответ 8

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

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

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

Подробнее, проверьте основы sass

Ответ 9

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

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>

Ответ 10

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

div.something.else {

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

}

Ответ 11

В файле Css:

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

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

Ответ 12

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

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

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

Ответ 13

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

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

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

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

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

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

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

Ответ 14

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

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

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

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

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

Ответ 15

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

Это своего рода конкурент МЕНЬШЕ.

Ответ 16

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

Ответ 17

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

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

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

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

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

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

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

Ответ 18

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

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

Ответ 19

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

composite.something, composite.else
{
    blblalba
}

Это неожиданно сработало для меня:)

Ответ 20

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

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

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

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

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

Ответ 21

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

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

Ответ 22

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

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

Ответ 23

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

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

Ответ 24

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

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

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

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

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

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

Ответ 25

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

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

Ответ 26

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

http://dennisbareis.com/ppwizard.htm

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

Ответ 27

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

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

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

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

Ответ 28

Посмотрите на 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;
}

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

Ответ 29

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

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

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

Практическое значение для программирования заключается в следующем. Скажем, у вас есть таблица стилей, приведенная выше, и вы хотите добавить новый класс .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. Тем не менее, необходимо помнить об альтернативах для редактирования каждого класса атрибута. где есть скрытые зависимости каждый раз, когда что-то меняется, или использовать сторонний инструмент. Первый вариант заставляет бога смеяться, второй заставляет меня хотеть убить себя.

Ответ 30

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

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

...