CSS Dziedziczenie

Question

Say mam div takiego, który będzie miał wszystkie te same właściwości z obrazem tła lub coś w tym stylu:

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

Chciałem dziedziczyć po nim tak:

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

Oczywiście jestem prawie pewien, że napisano to źle i nie boję się poprosić o pomoc, więc czy ktoś może mi powiedzieć, jak to zrobić i uwzględnić znaczniki HTML?

Answer 1

Najłatwiej jest dodać element someInheritedDiv do pierwszej reguły podobnej do tej.

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

Pokaże to #someInheritedDiv, aby zastosować te same style co div.someBaseDiv. Następnie rozszerzyć ten zestaw stylów z bardziej specyficzne dla #someInheritedDiv:

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

ten sposób swoistość w pracach CSS.

Answer 2

To naprawdę zależy od Twojego znacznika. Jeśli dziedziczny element znajduje się pod elementem div z klasą someBasDiv, wszystkie jego elementy potomne automatycznie odziedziczą te właściwości.

Jeśli jednak chcesz dziedziczyć z klasy w dowolnym miejscu someBaseDiv w znacznikach, można po prostu zrobić element, który chcesz dziedziczyć z używać obu tych klas tak:

<div class="someBaseDiv someInheritedDiv"> 

i Twój css byłoby tak:

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

do tego zadania, polecam użyć potężnego rozszerzenia CSS o nazwie LESS. Kompiluje się do CSS lub może być używany w locie z plikiem javascript, jak wyjaśnia link.

LESS wspiera dziedziczenie (prawie) zgodnie z opisem. The documentation ma szczegóły (patrz rozdział "Mixins").

Dla Twojej przykład mniej kodu będzie:

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

Zauważ, że musiałby to być .someBaseDiv i nie div.someBaseDiv

Answer 4

Co chcesz zrobić, to niektóre CSS dotyczą dwóch różnych rodzajów elementów, ale pozwól im również na pewne różnice. Można to zrobić za pomocą kilku prostych HTML:

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

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

Spowoduje to dodanie współdzielonych właściwości obu rodzajów div, ale konkretne te tylko pochodzi div s

Answer 5

Użyj obu klas i połącz je tak:

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

Znacznik jest następujący:

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

Teraz, w ten sposób można przesłonić klasy bazowej w razie potrzeby ... a ponieważ nie trzeba zachować dodanie nowych nazw klas definicji klasy bazowej, to trochę odkurzacz.

Answer 6

Jeśli chcesz, aby wszystkie wewnętrzne DIV z konkretnej klasy dziedziczą z klasy bazowej zbudować znaczników HTML tak:

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

a CSS

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

Jeśli wszystkie DIV musi dziedziczyć zmień .child na div.

See this example on jsFiddle

Poniższy kod

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

oznacza: górny element (dowolny) z klasy someClass doda style dla wszystkich swoich dzieci DIV (rekurencyjnie).