Vue单文件组件中的CSS会覆盖buefy/bulma中的一些CSS，而另一些则不会

我希望有人能给我一个提示，如何调查这个问题

在Vue项目中，buefy包含在

main.js

中，如下所示：

从“Vue”导入Vue
从“Buefy”导入Buefy
导入“./style.scss”
Vue.use（Buefy）
从“./Client.vue”导入客户端
让vm=新Vue({
el:“#应用程序”，
呈现：h=>h（客户端）
})

，其中

style.css

导入buefy/bulma样式：

@import "~bulma/sass/utilities/_all";
[...]
@import "~bulma";
@import "~buefy/src/scss/buefy";

Buefy/Bulma css应被单文件vue组件中定义的样式覆盖，如：

<style lang="scss">
.logLine{
    margin: 0px;
    padding: 1em; 
}
</style>

.logLine{
边际：0px；
填充：1em；
}

奇怪的是，

padding

覆盖了bulma样式（如预期的那样），

margin

被bulma样式覆盖：

@import "~bulma/sass/utilities/_all";
[...]
@import "~bulma";
@import "~buefy/src/scss/buefy";

它显示，

bulma/sass/base/minireset.sass

中的样式被单个文件组件中的

.logLine

样式定义覆盖。但是

.logLine

样式定义被

bulma/sass/elements/content.sass

覆盖

---

我希望

.logLine

中的样式会覆盖所有的Buefy/Bulma样式。

在制定问题时，细节会吸引您的注意力，引导您找到答案：

bulma中的样式覆盖了单个文件组件中的我的样式，它使用css伪类

：last child

.content p:not（：last child），[…]{
边缘底部：1米；
}

我认为这

：last child

使firefox授予此样式规则优先权

我通过向单个文件组件中的选择器添加

.content.logLine:not（：last child）

来“解决”这个问题

.content.logLine:not（：最后一个子项），
.logLine{
边际：0px；
}

---

现在它不再被覆盖。

注意，我必须使用

.content.logLine:not（：last child）

。只要

。logLine:not（：last child）

就没有效果了。一些CSS大师能解释一下这里的优先顺序吗？