Как заставить элемент наследовать набор правил CSS для другого элемента?

Скажем, у меня есть <div>, подобный этому, который будет иметь все те же свойства с фоновым изображением или что-то в этом роде:

div.someBaseDiv {
    margin-top: 3px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 0px;
}

И я хотел унаследовать это так:

div.someBaseDiv someInheritedDiv {
    background-image: url("images/worldsource/customBackground.gif");
    background-repeat: no-repeat;
    width: 950px;
    height: 572px;
}

Конечно, я уверен, что это написано неправильно, и я не боюсь просить о помощи, поэтому кто-то может сказать мне, как заставить это работать и включить разметку HTML?

Ответ 1

Проще всего добавить элемент someInheritedDiv в первое правило, подобное этому.

div.someBaseDiv,
#someInheritedDiv
{
    margin-top:3px;
    margin-left:auto;
    margin-right:auto;
    margin-bottom:0px;
}

Это позволит вашему #someInheritedDiv применять те же стили, что и div.someBaseDiv. Затем вы расширяете этот набор стилей более конкретно к вашему #someInheritedDiv:

#someInheritedDiv
{
    background-image:url("images/worldsource/customBackground.gif");
    background-repeat:no-repeat;
    width:950px;
    height:572px;
}

Вот как работает специфика в CSS.

Ответ 2

Используйте оба класса и объедините их так:

.baseClass
{
    margin-top:3px;
    margin-left:auto;
    margin-right:auto;
    margin-bottom:0px;
}

.baseClass.otherClass /* this means the element has both baseClass and otherClass */
{
    background-image:url("images/worldsource/customBackground.gif");
    background-repeat:no-repeat;
    width:950px;
    height:572px;
}

Разметка выглядит следующим образом:

<div class="baseClass otherClass"></div>

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

Ответ 3

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

LESS поддерживает наследование (почти), как вы описываете. В документации содержится подробная информация (см. Раздел "Микшины" ).

Для вашего примера код LESS будет выглядеть следующим образом:

.someBaseDiv {
    margin-top:3px;
    margin-left:auto;
    margin-right:auto;
    margin-bottom:0px;
}

someInheritedDiv {
    .someBaseDiv;

    background-image:url("images/worldsource/customBackground.gif");
    background-repeat:no-repeat;
    width:950px;
    height:572px;
}

Обратите внимание, что это должно быть .someBaseDiv, а не div.someBaseDiv

Ответ 4

Что вы хотите сделать, так это сделать CSS применимым к двум различным типам элементов, но также дать им возможность иметь некоторые отличия. Вы можете сделать это, используя простой HTML:

<div class="base">
    <div class"inherited">
    </div>
</div>

И CSS:

.base, .inherited{
    margin-top:3px;
    margin-left:auto;
    margin-right:auto;
    margin-bottom:0px;
}

.inherited{
    background-image:url("images/worldsource/customBackground.gif");
    background-repeat:no-repeat;
    width:950px;
    height:572px;
}

Это добавит общие свойства к обоим типам div, но конкретные только к производным div s

Ответ 5

Это действительно зависит от вашей разметки. Если ваш унаследованный элемент находится под div с классом someBasDiv, то все дочерние его элементы автоматически наследуют эти свойства.

Если, однако, вы хотите наследовать класс someBaseDiv в любом месте вашей разметки, вы можете просто создать элемент, который вы хотите наследовать, использовать оба этих класса:

<div class="someBaseDiv someInheritedDiv">

и ваш css будет выглядеть следующим образом:

div.someBaseDiv
{
    margin-top:3px;
    margin-left:auto;
    margin-right:auto;
    margin-bottom:0px;
}

div.someInheritedDiv
{
    background-image:url("images/worldsource/customBackground.gif");
    background-repeat:no-repeat;
    width:950px;
    height:572px;
}

Ответ 6

Если вы хотите, чтобы все внутренние DIV с определенным классом наследовали от базового класса, создайте разметку HTML следующим образом:

<div class="parent">
    <div class="child">X</div>
</div>

И CSS

.parent { border: 2px solid red; color: white }
.parent .child { background: black }

Если все DIV должны наследовать изменение .child до div.

См. этот пример в jsFiddle

Следующий код

// parent     // all DIVs inside the parent
.someClass    div { }

Средство: Верхний элемент (любой) с классом someClass добавит стили ко всем его дочерним DIVs (рекурсивно).