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

Question

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

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

Например, говорят, что мы имели:

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

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

.composite 
{ 
    .something; 
    .else 
} 

где «.composite» класс будет и отображение встроенных и имеют красный фон

Answer 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; 
} 

Answer 2

элемент может иметь несколько классов:

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

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

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

Answer 3

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

Answer 4

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

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

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

Answer 5

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

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

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

Answer 6

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

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

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

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

Другой способ заключается в указании двух классов:

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

Стиль «еще» перекроет (или добавить) стиль «что-то»

Answer 7

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

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

Answer 8

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

.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 и цвет унаследованной из настроек в охватывающем div, который является .foo в стиле. Возможно, вам придется проверить точную спецификацию W3C. inherit по умолчанию для большинства свойств в любом случае, но не для всех.

Answer 9

В Css файле:

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

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

Answer 10

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

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

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

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

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

Answer 11

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

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

Answer 12

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

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

Answer 13

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

div.something.else { 

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

} 

Answer 14

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

.composite, 
.something { display:inline } 

.composite, 
.else  { background:red } 

Answer 15

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

http://dennisbareis.com/ppwizard.htm

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

Answer 16

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

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

Answer 17

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

composite.something, composite.else 
{ 
    blblalba 
} 

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

Answer 18

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

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

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

Answer 19

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

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

Answer 20

SCSS путь для данного примера, будет что-то вроде:

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

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

Более подробную информацию, проверить sass basics

Answer 21

Вы можете добиться того, что вы хотите, если вы препроцессировать ваш. css-файлы через php. ...

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

...

Answer 22

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

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

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

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

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

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

Answer 23

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

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

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

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

Answer 24

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

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> 

Answer 25

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

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

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

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

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

Answer 26

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

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

Answer 27

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

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

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

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

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

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

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