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

Question

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

在 Vue 项目中，buefy 包含在main.js中，如下所示：

import Vue from 'vue' 
import Buefy from 'buefy'
import './style.scss'
Vue.use(Buefy)
import Client from './client.vue' 
let vm = new Vue({
el: '#app',
render: h => h(Client) 
})

，其中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>

奇怪的观察结果是，虽然padding覆盖了布尔玛样式(如预期的那样)，但margin被布尔玛样式覆盖：

来自Firefox CSS Inspector的屏幕截图

它显示，虽然来自bulma/sass/base/minireset.sass的样式会被单个文件组件中的.logLine样式定义覆盖。但是.logLine样式定义会被bulma/sass/elements/content.sass覆盖。

我希望.logLine的样式能够覆盖所有Buefy/Bulma样式。

Answer 1

正如经常发生的那样，在制定问题时，细节会吸引您的注意力，从而引导您找到答案：

来自 bulma 的样式覆盖了单个文件组件中的样式，它使用的是 css 伪类:last-child

.content p:not(:last-child), [...] {
margin-bottom: 1em;
}

我认为这种:last-child使火狐授予这种样式规则优先级。

我通过在单个文件组件中的选择器中添加.content .logLine:not(:last-child)来"解决"问题。

.content .logLine:not(:last-child), 
.logLine, {
margin: 0px;
}

现在它不再被覆盖。