Чи може клас CSS успадкувати один чи більше інших класів?

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

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

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

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

Що я хотів би зробити так, як це:

.composite 
{
   .something;
   .else
}

де клас ".composite" буде відображати вбудований рядок і мати червоне тло

Є такі інструменти, як МЕНШЕ , які дозволяють складати 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>

Правила, подані в пізніших класах (або які більш конкретні), переосмислюють. Тож fourthclassв цьому прикладі переважає вид.

Спадкування не є частиною стандарту 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;
}

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

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

Там, де кольори та кольори абзаців успадковуються з налаштувань у розділі, що додається до .fooстилю. Можливо, вам доведеться перевірити точну специфікацію W3C. inheritза замовчуванням для більшості властивостей все одно, але не для всіх.

Я зіткнувся з цією самою проблемою і в кінцевому підсумку використовував рішення JQuery, щоб зробити вигляд, що клас може успадкувати інші класи.

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

Це знайде всі елементи з класом "композит" та додасть до класів "щось" та "ще". Так щось подібне <div class="composite">...</div>закінчиться так:
<div class="composite something else">...</div>

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

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

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

Детальніше, ознайомтеся з основами sass

Найкраще ви можете це зробити

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>

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

div.something.else {

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

}

У файлі 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. Зауважте, що, як і OOP успадкування, .umbrellaClassможе мати або не мати своїх властивостей.

Єдине застереження тут - це врахувати, чи є елементи, що динамічно створюються, які не існуватимуть, коли цей код запускається, але існують і прості шляхи навколо цього.

Sucks css, однак, не має спадкової спадщини.

Ідеальний термін : я перейшов із цього питання до свого електронного листа, щоб знайти статтю про Less , бібліотеку Ruby, яка, серед іншого, робить це:

Оскільки super виглядає так само footer, але з іншим шрифтом, я буду використовувати техніку включення класу Лесса (вони називають це міксин), щоб сказати, щоб він також включав ці декларації:

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

На жаль, CSS не забезпечує "успадкування" так, як це роблять мови програмування, такі як C ++, C # або Java. Ви не можете оголосити клас CSS, а потім розширити його іншим класом CSS.

Однак ви можете застосувати більше ніж один клас до тегу у своїй розмітці ... в цьому випадку існує складний набір правил, який визначає, які фактичні стилі будуть застосовані браузером.

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

CSS шукатиме всі стилі, які можна застосувати, залежно від розмітки, і поєднає стилі CSS з цих кількох правил разом.

Зазвичай стилі об'єднуються, але коли виникають конфлікти, пізніше оголошений стиль, як правило, виграє (якщо тільки важливий атрибут не вказаний для одного зі стилів, у цьому випадку виграє). Також стилі, застосовані безпосередньо до елемента HTML, мають перевагу над стилями класів CSS.

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

Це свого роду конкурент менше.

Це неможливо в CSS.

Єдине, що підтримується у CSS, - це конкретніше, ніж інше правило:

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

Проміжок з класом "myclass" матиме обидві властивості.

Ще один спосіб - вказати два класи:

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

Стиль "else" замінить (або додасть) стиль "щось"

Ви можете застосувати до одного класу CSS щось подібне до цього класу = "щось інше"

Як говорили інші, ви можете додати до елемента кілька класів.

Але це насправді не сенс. Я отримую ваше запитання про спадщину. Справжній сенс полягає в тому, що успадкування в CSS здійснюється не через класи, а через ієрархії елементів. Отже, для моделювання успадкованих ознак потрібно застосувати їх до різних рівнів елементів у DOM.

Я шукав це, як божевільний, і я просто зрозумів це, пробуючи різні речі: P ... Ну ти можеш це зробити так:

composite.something, composite.else
{
    blblalba
}

Це раптом у мене вийшло :)

За конкретних обставин ви можете зробити "м'яке" успадкування:

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

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

Це працює лише в тому випадку, якщо ви додаєте .composite клас до дочірнього елемента. Це "м'яке" успадкування, оскільки будь-які значення, не вказані в .composite, не успадковуються очевидно. Майте на увазі, що все-таки менше символів буде просто писати "вбудований" і "червоний", а не "успадковувати".

Ось список властивостей і те, чи вони це роблять автоматично: https://www.w3.org/TR/CSS21/propidx.html

Хоча пряме успадкування неможливо.

Можна використовувати клас (або ідентифікатор) для батьківського тегу, а потім використовувати комбінатори 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 має розширений варіант, що дозволяє повністю розширити один клас до іншого. Більше про розширення ви можете прочитати в цій статті

Насправді те, що ви просите, існує - однак це робиться як додаткові модулі. Ознайомтесь із цим запитанням на веб-сайті Better CSS у .NET для прикладів.

Ознайомтеся з відповіддю Ларсеналу щодо використання ЛЕШЕ, щоб отримати уявлення про те, що роблять ці додатки.

CSS насправді не робить те, що ви просите. Якщо ви хочете написати на увазі правила з цією складною ідеєю, ви можете перевірити компас . Це рамка таблиць стилів, яка схожа на вже згадану Менш.

Це дозволяє вам робити комбінації та всі добрі справи.

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

Це найкращий злом, який я міг придумати.

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

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

Потім застосуйте глобальну змінну до потрібного елемента, а не самих назв класів

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

Подивіться на CSS compose : https://bambielli.com/til/2017-08-11-css-modules-compose/

відповідно до них:

.serif-font {
    font-family: Georgia, serif;
}

.display {
    composes: serif-font;
    font-size: 30px;
    line-height: 35px;
}

Я використовую це у своєму проекті реагування.

Не думайте про класи css як об’єктно-орієнтовані класи, не думайте про них як про інструмент серед інших селекторів, щоб вказати, до яких класів атрибутів стилюється html-елемент. Подумайте про все між дужками як клас атрибутів , а селектори ліворуч повідомляють про елементи, які вони вибрали для успадкування атрибутів з класу атрибутів . Приклад:

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

Коли елементу надається атрибут class="foo", корисно думати про нього не як про спадкові атрибути класу .foo, а про клас атрибутів A та клас 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 . Тим не менш, альтернативи повинні пам’ятати, щоб редагувати кожен клас атрибутів, де є приховані залежності кожного разу, коли щось змінюється, або використовувати сторонній інструмент. Перший варіант сміє бога, другий змушує мене вбити себе.

Якщо ви хочете більш потужний текстовий препроцесор, ніж LESS, перегляньте PPWizard:

http://dennisbareis.com/ppwizard.htm

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

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

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

...