CSS中的级联属性

Question

我无法理解CSS中的级联。

.lastBtnOfSection > button {
    color:red;
}

.sectionBtn {
    color:black;
}

这两个都是.lastBtnOfSection中包含的按钮。

.sectionBtn是按钮的类。根据级联，后者应该覆盖但只有在我将.sectionBtn更改为.lastBtnOfSection > .sectionBtn时才有效。

Answer 1

这是因为选择器.lastBtnOfSection > button是more specific而不是.sectionBtn。

选择器.lastBtnOfSection > button的{​​{3}}为11，而选择器.sectionBtn为10（类选择器的特异性为10，类型选择器为1）。

由specificity calculation指出，Gray in the comments用于自动计算这些值。