来自 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 覆盖了 bulma 样式（如预期的那样），但 margin 被 bulma 样式覆盖：

screenshot from 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 让firefox 授予这种样式规则优先级。

我通过将.content .logLine:not(:last-child) 添加到单个文件组件中的选择器来“解决”了这个问题。

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

现在它不再被覆盖。