Наследование CSS

Question

Скажем, у меня есть 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?

Answer 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 работ.

Answer 2

Это действительно зависит от вашей разметки. Если ваш унаследованный элемент находится под 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; 
} 

Answer 3

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

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

Для примера, то МЕНЬШЕ код будет:

.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

Answer 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

Answer 5

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

.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, это немного очиститель.

Answer 6

Если вы хотите, чтобы все внутреннее DIVs с определенным классом, чтобы наследовать от базового класса строить HTML-разметку, как это:

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

И КСС

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

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

See this example on jsFiddle

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

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

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