9

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

5

Вопрос о наследовании CSS-классов

Возможно ли создать CSS-класс, который "наследует" стили от другого CSS-класса (или нескольких классов)?

Например, у нас есть следующие классы:

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

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

.composite 
{
   .something;
   .else;
}

Где класс ".composite" должен иметь стили как для inline-отображения, так и для красного фона.

Есть ли способ реализовать такую функциональность в CSS? Если да, то как это сделать?

5 ответ(ов)

3

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

<div class="firstClass secondClass thirdClass fourthClass"></div>

Правила, указанные в классах, стоящих позже (или которые более специфичны), имеют приоритет. Таким образом, в данном примере fourthClass будет иметь приоритет.

Наследование не является частью стандарта CSS.

1

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

.composite,
.something { display: inline; }

.composite,
.else      { background: red; }

В данном примере ты видишь, что два класса .composite и .something имеют одно свойство display: inline, а классы .composite и .else — одно свойство background: red. Это позволяет использовать одну и ту же правую часть для нескольких селекторов, что упрощает и сокращает код.

1

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

/*  ------------------------------------------------------------------------------ */   
/*  Заголовки */ 
/*  ------------------------------------------------------------------------------ */   
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;
}

В этом коде общие атрибуты для всех заголовков (h1, h2, h3, h4) определены в одном месте, что облегчает поддержку и изменение стилей. Специфические атрибуты, такие как font-size и padding, для каждого заголовка указаны отдельно, что позволяет точно контролировать их внешний вид без дублирования кода.

0

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

.classOne { font-weight: bold; }
.classTwo { font-family: verdana; }
<div class="classOne classTwo">
  <p>Я жирный и в шрифте verdana.</p>
</div>

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

0

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

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

Чтобы ответить на вопрос, пожалуйста, войдите или зарегистрируйтесь