css class descendance understanding

Question

我需要了解如何實現這樣的事情。 假設我有一個主鍵類，說

.btn{ 
    font-family:Serif; 
} 

現在我希望所有的按鈕有這個字體，不過隨後在不同的位置我想有不同的字體大小，如

.btn-lrg{ 
    font-size:2.em; 
} 

和然後在另一個位置我想的字體大小小，因爲

.btn-sml{ 
    font-size:0.5em 
} 
.btn-reg{ 
    font-size:1.0em 
} 

我如何申報CSS代碼，這樣我基本上可以用它作爲以下（或請指向正確的語法）

<button class="btn btn-lrg"><br/> 
<button class="btn btn-reg"><br/> 
<button class="btn btn-sml"><br/> 

感謝指導..

Answer 1

您在OP中編寫的代碼將以您編寫它的方式正常工作。但正如在評論中闡明你基本上要做到這一點：

<button class="btn-lrg">...</button> 

，仍然保持了款式.btn。不幸的是，CSS沒有辦法從另一個規則「繼承」樣式;但你可以這樣做：

.btn, .btn-lrg, .btn-sml, .btn-reg { 
    font-family: Serif; 
} 
.btn-lrg{ 
    font-size:2.0em; 
} 
.btn-sml{ 
    font-size:0.5em 
} 
.btn-reg{ 
    font-size:1.0em 
} 

另一種方法是使用CSS預處理器，如LESS或SASS。缺點是每次更新的代碼時，你需要通過預處理程序重新運行（儘管這可能被自動）

LESS：

.btn { 
    font-family: Serif; 
} 
.btn-lrg { 
    .btn; 
    font-size:2.0em; 
} 
/* ... */ 

SASS：

.btn { 
    font-family: Serif; 
} 
.btn-lrg { 
    @extend .btn; 
    font-size:2.0em; 
} 
/* ... */ 

Answer 2

如果希望所有按鈕具有相同的字體，你不需要使用類。

button { 
    font-family: Serif; 
} 

除非在類中指定了新的字體系列，否則應用新類將不會更改字體系列。

Answer 3

您的職業.btn只是一個「主」類，因爲它具有您想要更常用的屬性。除此之外，這些課程是平等的，並將按照這種方式處理。如果您在幾個方面有競爭的財產報表，如font-family，則特異性成爲一個問題。

如上所述，您可以使用您的課程，因爲您無需擔心。