Jak odziedziczyć css z tagu grandparent?

Question

Mam div poziomie zagnieżdżenia i chcę zastosować div gospodarstwa klasy "c" o tej samej szerokości div z klasy a. Jeśli jest to rodzic, to domyślam się, że to dziedziczy. Ale co należy zrobić w tym przypadku?

kod HTML:

<div class="a"> 
    <div class="b"> 
    <div class="c"> 

    </div> 
    </div> 
</div> 

CSS CODE

.a{ 
width:600px; 
} 
.b{ 
width:80%; 
} 
.c{ 
//needs to inherit width property set for class a without directly mentioning it as 600px 
} 

Answer 1

Niestety nie można tego zrobić w czystym CSS domyślnie element dziecko nie dziedziczy width, trzeba określić to tak, domyślnie będzie to 100%, jeśli użyjesz elementu blokowego, takiego jak tag div lub p, ale w kolejności do dziedziczą (ponownego wykorzystania) własność Dziadkowie można wykorzystać procesory CSS wcześniej jak mniej lub SASS ..

więc jeśli chcesz to zrobić w SASS możemy zrobić coś

.a { 
    width: 600px; 
} 

.b { 
    width: 80%; 
} 

.c { 
    @extend .a; 
    //This is still not an inheritance, you are simply pulling in all the 
    //properties defined in .a to this class 
} 

So tutaj wybierze wszystkie właściwości z .a do .c. Ale tu jest haczyk, podczas korzystania . notacji w SASS, to dosłownie wydrukować blok .a, tak więc jeśli chcesz tylko używać go do @extend celu można napisać ten selektor zamiast

%a { 
    width: 600px; 
} 

.c { 
    @extend %a; 
} 

Tu Sass nie drukuje .a już jednak tylko .c Ty możesz skierować urzędowe dokumenty dłużej nad SASS @extend

można również zdefiniować zmienne w SASS więc zdefiniowanie jednego z $base-width: 600px; i ponownie używając go w poprzek może mieć sens, jak również. Jeśli nadal chcesz trzymać się tradycyjnego CSS, to polecam deklarowanie wielu klas, tak jak sugerował Manoj, ale nie zrobiłbym tego tak, jak gdybyś deklarował jakiekolwiek właściwości w .a i to samo w .c rzeczy zaczną się brudzić.

Answer 2

Możesz dodać wiele klas div do wnuka do include właściwości od a do c.

Ustawienie 80% dla .b spowoduje 80% z 600px = 480px dla .c Należy zmodyfikować do 100%.

.a { 
 
    width: 600px; 
 
} 
 
.b { 
 
    width: 100%; 
 
}

<div class="a"> 
 
    <div class="b"> 
 
    <div class="a c"> 
 
     I am 600px wide. 
 
    </div> 
 
    </div> 
 
</div>

Answer 3

Poniżej jest możliwość i jako takie mogą być przydatne, ale nie jest zalecany jako najlepszy sposób dla większości przypadków. Przypomina mi o problemach z jednostkami em.

Używanie pre-procesora ze zmiennymi jest lepszym sposobem, chociaż nie jest to dokładnie dziedziczenie, ani nie jest czystym css.

.a { 
    width:600px; 
} 
.b { 
    width:80%; 
} 
.c { 
    width: 125%; 
} 

Jeżeli .c { width } jest 100/.b { width } * 100 lub na przykład 125%.

zobaczyć example here on JSFiddle

Ty nadal dziedziczy od rodziców, ale rodzice z kolei dziedziczy z dziadków.