CSS from a Vue Single File Component overrides some CSS from buefy/bulma and some not

Question

I hope someone can give me a hint, how to investigate this issue.

In a Vue project, buefy is included from main.js like this:

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) 
})

, where style.css imports buefy/bulma styles:

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

Buefy/Bulma css should be overriden by styles defined in single file vue components like:

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

The strange observation is, that while padding overrides bulma styles (as expected), margin is overridden by bulma styles:

screenshot from firefox css inspector

It shows, that while styles from bulma/sass/base/minireset.sass get overridden by .logLine style definitions from the single file component. But .logLine style definitions get overridden by bulma/sass/elements/content.sass.

I expect the styles from .logLine to override all Buefy/Bulma styles.

Answer 1

As often happens, when formulating the question, details catch your attention that guide you to the answer:

The style from bulma that was overriding my styles from the single file component was using the css pseudo class :last-child

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

I think this :last-child makes firefox grant this style rule precedence.

I "solved" the problem by adding .content .logLine:not(:last-child) to the selectors in the single file component.

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

Now it does not get overridden anymore.