CSS中的级联属性

Question

我无法理解CSS中的级联。

.lastBtnOfSection > button {
    color:red;
}

.sectionBtn {
    color:black;
}

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

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

Answer 1

这是因为选择器.lastBtnOfSection > button是更具体而不是.sectionBtn。

选择器.lastBtnOfSection > button的特异性计算为11，而选择器.sectionBtn为10 (类选择器的特异性为10，类型选择器为1)。

正如评论中的灰色指出的，这是一个很好的工具用于自动计算这些值。