如何從grandparent標籤繼承css？

我有一個兩級嵌套的div，我想申請div與class a相同的寬度的div舉行類「c」。如果它是父母，那麼我認爲繼承將完成這項工作。但在這種情況下要做什麼？如何從grandparent標籤繼承css？

HTML代碼：

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

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

CSS代碼

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

來源

2015-07-04 Kiran Dash

可惜你不能在純CSS爲此，默認情況下，子元素永遠繼承width，你需要指定它，是的，默認情況下，如果您使用塊級元素（如div或p標籤），但是按繼承（再利用），盛大的父母，你可以使用CSS預處理器一樣都不能少或SASS的財產..

所以，如果你想這樣做在SASS，我們可以做這樣的事情

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

所以在這裏它會選擇從.a到.c的所有屬性。但這裏有一個趕上，當你在SASS使用.符號，它會從字面上打印.a塊一樣，所以，如果你想只用它來@extend目的，你可以寫這個選擇，而不是

%a { 
    width: 600px; 
} 

.c { 
    @extend %a; 
}

這裏SASS不會打印.a了，但只有.c。你可以參考官方文檔的更多了SASS @extend

您還可以在SASS這樣定義一個與$base-width: 600px;定義變量，並用它可以跨越任何意義，以及重新。如果你仍然想要堅持使用傳統的CSS，那麼我建議你像Manoj建議的那樣聲明多個類，但是我不會這樣做，就好像你聲明.a中的任何屬性一樣，.c中的東西也會變得混亂。

來源

2015-07-04 07:41:06

我推薦使用的變量：'$寬度：600px的;'和'的.c {寬度：$寬度; }''以上@ extend'因爲後者可以有意想不到的棘手後果 –

我會寫我自己的答案，但我認爲它可能就迷失 –

的xD我寫的第一，我刪除了，所以我以爲只是因爲它也是處理這些東西的最佳方式之一，再次添加 –

您可以將多個類添加到grandchild div到include a到c的屬性。

同樣爲.b設置80％將導致600px = 480px的80％對於.c您需要將其修改爲100％。

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

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

來源

2015-07-04 07:43:53

這不是類繼承..'C'永遠繼承'了' –

哎呀，我的意思是'include'，而不是'inherit' –

下面是一個可能性，因此可能是有用的，但不推薦，因爲在大多數情況下的最佳途徑。它讓我想起em單位的問題。

對變量使用預處理器是一種更好的方法，雖然它不完全是繼承，也不是純粹的CSS。

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

凡.c { width }是100/.b { width } * 100，或在本例中125％。

看到example here on JSFiddle

你仍然從父繼承，但反過來父從祖父母繼承。

來源

2015-07-04 08:10:48

如何從grandparent標籤繼承css？

回答

相關問題