Question

有时当我为某些东西声明一个值，后来我想用不同的值覆盖它时它不起作用。例如（萨斯造型）：

.wrapper-breadcrumbs {
    h1.breadcrumb-title {
        font-size: 46px;
    }
}

就在下面，我把它......

@media (max-width: 768px) {
    h1.breadcrumb-title {
        font-size: 32px;
    }
}

...它不会起作用，我在Chrome元素检查中看到第一个实际上覆盖了第二个值，即使第二个语句低于第一个。但如果我像这样重复父类名......

@media (max-width: 768px) {
    .wrapper-breadcrumbs h1.breadcrumb-title {
        font-size: 32px;
    }
}

然后它的作品！对我来说似乎很奇怪......这有什么规则吗？我错过了什么吗？为什么我要编写父类名？

Answer 1

这是因为第一条规则对第一条规则具有更高的特异性（2个类别和1个元素），对于第一条规则具有1个元素和1个元素。

第二条规则需要具有相同或更高的特异性才能覆盖第一条规则。我建议您查看有关CSS技巧的Specifics on Specificity文章了解更多详情。

正如评论中所提到的，你也可以在!important之后将font-size放在第二条规则中，但这通常是非常糟糕的做法，你应该修改你的CSS规则具有更高的特异性，更清晰，可以帮助您在调试CSS时避免头痛：）

Answer 2

这是由于第一选择器具有比第二选择器更高的先例。像Id选择器具有比类选择器更高的先例。因此，如果您使用id选择器应用任何样式，并且稍后自己尝试使用类选择器覆盖它，那么它将无效。

.wrapper-breadcrumbs {
    h1.breadcrumb-title {
        font-size: 46px;
    }
}

在这种情况下，你有两个类和一个属性选择器，所以它的先例是跟随。

precedent =（inline，id，class，element / pseudo）

先例=（0,0,2,1） //左元素具有比右元素更多的先例。

@media (max-width: 768px) {
    h1.breadcrumb-title {
        font-size: 32px;
    }
}

先例=（0,0,1,1）

你可以清楚地看到，第一个选择器的优先级高于第二个选择器，因此它永远不会起作用。

@media (max-width: 768px) {
    .wrapper-breadcrumbs h1.breadcrumb-title {
        font-size: 32px;
    }
}

先例=（0,0,2,1）

在这种情况下，它与第一个元素具有相同的优先级，因此它将覆盖以前的样式并将处理此数据。

您可以使用以下链接计算CSS选择器的优先级。

总是尝试通过管理选择器的优先级而不是使用CSS样式放置！important 来克服这个问题，因为它将覆盖选择器的默认优先级，并且在巨大的CSS情况下使其难以调试它。