CSS中的級聯屬性

Question

我無法理解CSS中的級聯。

.lastBtnOfSection > button { 
    color:red; 
} 

.sectionBtn { 
    color:black; 
} 

這裏都是包含在.lastBtnOfSection中的按鈕。

.sectionBtn是該按鈕的類。根據級聯，後來應該重寫，但只有當我將.sectionBtn更改爲.lastBtnOfSection > .sectionBtn時才起作用。

Answer 1

這是因爲選擇器.lastBtnOfSection > button是more specific比.sectionBtn。

選擇器.lastBtnOfSection > button的specificity calculation爲11，而選擇器.sectionBtn爲10（類別選擇器的特異性爲10，類型選擇器爲1）。

正如Gray in the comments,this is a nice tool所指出的，用於自動計算這些值。