Может ли класс CSS наследовать один или несколько других классов?
Я чувствую себя глупо из-за того, что так долго был веб-программистом и не знал ответа на этот вопрос, я на самом деле надеюсь, что это возможно, и я просто не знал, а то, что я думаю, является ответом (а это то, что это невозможно),
Мой вопрос заключается в том, возможно ли создать класс CSS, который "наследует" от другого класса CSS (или нескольких).
Например, скажем, у нас было:
.something { display:inline }
.else { background:red }
Я хотел бы сделать что-то вроде этого:
.composite
{
.something;
.else
}
где класс.composite будет отображаться как встроенный и иметь красный фон
28 ответов
Существуют такие инструменты, как 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;
}
Вы можете добавить несколько классов к одному элементу DOM, например
<div class="firstClass secondClass thirdclass fourthclass"></div>
Наследование не является частью стандарта CSS.
Да, но не совсем с этим синтаксисом.
.composite,
.something { display:inline }
.composite,
.else { background:red }
Держите общие атрибуты вместе и назначайте определенные (или переопределяющие) атрибуты снова.
/* ------------------------------------------------------------------------------ */
/* 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;
}
Способ SCSS для данного примера будет примерно таким:
.something {
display: inline
}
.else {
background: red
}
.composite {
@extend .something;
@extend .else;
}
Больше информации, проверьте основы Sass
Элемент может принимать несколько классов:
.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. inherit по умолчанию для большинства свойств, но не для всех.
Я столкнулся с этой же проблемой и в итоге использовал решение JQuery, чтобы создать впечатление, что класс может наследовать другие классы.
<script>
$(function(){
$(".composite").addClass("something else");
});
</script>
Это найдет все элементы с классом "составной" и добавит классы "что-то" и "еще" к элементам. Так что-то вроде <div class="composite">...</div> будет так:<div class="composite something else">...</div>
Лучшее, что вы можете сделать, это
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>
Вы можете использовать обратный подход для достижения того же результата - начните с композита, а затем удалите стили с помощью unset ключевое слово. Например, если вы начнете со следующего образца композиции:
.composite {
color: red;
margin-left: 50px;
background-color: green
}
затем вы можете повысить специфичность селектора, чтобы выборочно удалить стили, используя
unset:
.composite.no-color {
color: unset
}
.composite.no-margin-left {
margin-left: unset
}
.composite.no-background-color {
background-color: unset
}
Вот JSFiddle, демонстрирующий этот подход.
Одним из преимуществ этого подхода является то, что, поскольку
specificity из составных селекторов выше, чем сам состав, вам не нужны все комбинации классов для достижения желаемых результатов для нескольких комбинаций:
/* Multi-unset compound selector combinations, such as the one that follows, ARE NOT NECESSARY because of the higher specificity of each individual compound selectors listed above. This keeps things simple. */
.composite.no-background-color.no-color.no-margin-left {
background-color: unset;
color: unset;
margin-left: unset
}
Кроме того, при поддержке 96% покрытие браузера превосходное.
Не забывайте:
div.something.else {
// will only style a div with both, not just one or the other
}
Идеальное время: я перешел от этого вопроса к своей электронной почте, чтобы найти статью о Less, библиотеке Ruby, которая, помимо прочего, делает это:
поскольку super выглядит так же, как footer, но с другим шрифтом, я буду использовать технику включения класса Less (они называют это mixin), чтобы сказать ему также включать эти объявления:
#super {
#footer;
font-family: cursive;
}
В Css файле:
p.Title
{
font-family: Arial;
font-size: 16px;
}
p.SubTitle p.Title
{
font-size: 12px;
}
Я понимаю, что этот вопрос сейчас очень старый, но здесь нет ничего!
Если намерение состоит в том, чтобы добавить один класс, который подразумевает свойства нескольких классов, в качестве нативного решения, я бы рекомендовал использовать 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 из этих нескольких правил вместе.
Как правило, стили объединяются, но когда возникают конфликты, позднее объявленный стиль обычно побеждает (если только атрибут! Important не указан в одном из стилей, в этом случае выигрывает). Кроме того, стили, применяемые непосредственно к элементу HTML, имеют приоритет над стилями классов CSS.
Это невозможно в CSS.
Единственное, что поддерживается в CSS, это быть более конкретным, чем другое правило:
span { display:inline }
span.myclass { background: red }
Пролет с классом "myclass" будет иметь оба свойства.
Другой способ - указать два класса:
<div class="something else">...</div>
Стиль "else" переопределяет (или добавляет) стиль "что-то"
Не думайте о классах css как о объектно-ориентированных классах, думайте о них как о просто инструменте среди других селекторов, чтобы указать, какими классами атрибутов стилизован элемент html. Думайте обо всем, что находится между скобками, как о классе атрибутов, а селекторы в левой части сообщают элементам, которые они выбирают, наследовать атрибуты от класса атрибутов. Пример:
.foo, .bar { font-weight : bold; font-size : 2em; /* attribute class A */}
.foo { color : green; /* attribute class B */}
Когда элементу присваивается атрибут class="foo", полезно думать об этом не как о наследовании атрибутов от класса .foo, Но из атрибута класса А и класса B атрибут. То есть, граф наследования - это один уровень в глубину, с элементами, производными от классов атрибутов, и селекторами, указывающими, где идут ребра, и определяющими приоритет при наличии конкурирующих атрибутов (аналогично порядку разрешения методов).
Практическое значение для программирования таково. Допустим, у вас есть таблица стилей, указанная выше, и вы хотите добавить новый класс..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. Тем не менее, альтернативы должны не забывать редактировать каждый класс атрибутов, где есть скрытые зависимости, каждый раз, когда что-то изменяется, или использовать сторонний инструмент. Первый вариант рассмешит бога, второй заставит меня убить себя.
Также есть SASS, который вы можете найти по адресу http://sass-lang.com/. Там есть тег @extend, а также система смешанных типов. (Рубин)
Это своего рода конкурент LESS.
Как уже говорили другие, вы можете добавить несколько классов к элементу.
Но дело не в этом. Я получил ваш вопрос о наследовании. Суть в том, что наследование в CSS осуществляется не через классы, а через иерархию элементов. Поэтому для моделирования унаследованных черт вам необходимо применять их к различным уровням элементов в DOM.
Вы можете применить более одного класса CSS к элементу с помощью чего-то вроде этого класса ="что-то еще"
Пока прямое наследование невозможно.
Можно использовать класс (или идентификатор) для родительского тега, а затем использовать 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 таким способом. (Например, изменение типов оформления текста).
Less и Sass - это препроцессоры CSS, которые ценным образом расширяют язык CSS. Только одно из многих улучшений, которые они предлагают, это просто вариант, который вы ищете. Есть несколько очень хороших ответов с Меньше, и я добавлю решение Sass.
У Sass есть опция расширения, которая позволяет полностью расширить один класс на другой. Подробнее о расширении вы можете прочитать в этой статье
Я тоже искал это как сумасшедший, и я просто понял это, попробовав разные вещи:P... Ну, вы можете сделать это так:
composite.something, composite.else
{
blblalba
}
У меня вдруг сработало:)
В определенных обстоятельствах вы можете сделать "мягкое" наследование:
.composite
{
display:inherit;
background:inherit;
}
.something { display:inline }
.else { background:red }
Это работает, только если вы добавляете класс.composite к дочернему элементу. Это "мягкое" наследование, потому что любые значения, не указанные в.composite, явно не наследуются. Имейте в виду, что все равно будет меньше символов, чтобы просто написать "inline" и "red" вместо "наследовать".
Вот список свойств и независимо от того, делают ли они это автоматически: https://www.w3.org/TR/CSS21/propidx.html
Я думаю, что это лучшее решение:
[class*=“button-“] {
/* base button properties */
}
.button-primary { ... }
.button-plain { ... }
CSS на самом деле не делает то, что вы просите. Если вы хотите написать правила с учетом этой составной идеи, вы можете проверить компас. Это фреймворк для таблиц стилей, который похож на уже упомянутый Less.
Это позволяет вам делать миксины и все такое хорошее дело.
На самом деле то, что вы просите, существует - однако это сделано как дополнительные модули. Проверьте этот вопрос на Лучшем CSS в.NET для примеров.
Ознакомьтесь с ответом Ларсенала об использовании LESS, чтобы понять, что делают эти дополнения.
Взгляните на создание CSS: 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;
}
Я использую его в своем проекте реакции.
Для тех, кто не удовлетворен упомянутыми (превосходными) постами, вы можете использовать свои навыки программирования, чтобы создать переменную (PHP или любую другую) и сохранить в ней несколько имен классов.
Это лучший взлом, который я мог придумать.
<style>
.red { color: red; }
.bold { font-weight: bold; }
</style>
<? define('DANGERTEXT','red bold'); ?>
Затем примените глобальную переменную к желаемому элементу, а не к самим именам классов.
<span class="<?=DANGERTEXT?>"> Le Champion est Ici </span>
Вы можете добиться наследственного поведения следующим образом:
.p,.c1,.c2{...}//parent styles
.c1{...}//child 1 styles
.c2{...}//child 2 styles
Смотрите http://jsfiddle.net/qj76455e/1/
Самым большим преимуществом этого подхода является модульность - вы не создаете зависимости между классами (как вы делаете, когда вы "наследуете" класс с помощью препроцессора). Поэтому любой запрос на изменение, касающийся CSS, не требует какого-либо большого анализа влияния.