来自Vue Single File组件的CSS会覆盖来自buefy/bulma的一些CSS，而有些不会

在Vue单文件组件（Single File Components，SFC）中，CSS的作用域是基于组件的，这意味着默认情况下，组件内的样式只会应用于该组件。然而，当使用像Buefy或Bulma这样的UI框架时，可能会遇到组件内的CSS覆盖框架的CSS的情况，而有时又不会。这通常与CSS的特异性（specificity）、加载顺序以及是否使用了CSS作用域有关。

基础概念

CSS特异性：CSS规则的应用取决于它们的特异性。具有更高特异性的规则将覆盖具有较低特异性的规则。

加载顺序：后加载的样式表会覆盖先加载的样式表中的相同选择器规则。

CSS作用域：在Vue SFC中，可以通过<style scoped>标签来限制样式仅应用于当前组件。

相关优势

• CSS作用域：有助于避免全局样式污染，使得组件更加独立和可重用。
• 特异性控制：通过合理设计选择器，可以精确控制样式的应用范围。

类型与应用场景

• 局部样式：适用于单个组件的样式定义。
• 全局样式：适用于多个组件共享的样式定义。

问题原因及解决方法

为什么有些CSS会覆盖，而有些不会？

1. 特异性差异：如果Vue组件内的选择器比Buefy/Bulma的选择器更具体，那么组件内的样式会优先应用。
2. 加载顺序：如果Vue组件的样式在Buefy/Bulma样式之后加载，那么组件内的样式会覆盖框架的样式。
3. CSS作用域：如果使用了<style scoped>，默认情况下样式不会泄漏到子组件，但如果子组件也定义了相同的选择器，可能会产生覆盖。

如何解决这些问题？

1. 提高特异性：在Buefy/Bulma的选择器基础上增加更具体的选择器，例如通过添加类名或ID。
2. 提高特异性：在Buefy/Bulma的选择器基础上增加更具体的选择器，例如通过添加类名或ID。
3. 调整加载顺序：确保Vue组件的样式在Buefy/Bulma样式之后引入。
4. 使用深度选择器：如果你使用了<style scoped>，但需要样式影响到子组件，可以使用深度选择器>>>或/deep/。
5. 使用深度选择器：如果你使用了<style scoped>，但需要样式影响到子组件，可以使用深度选择器>>>或/deep/。
6. 避免全局样式冲突：尽量避免在全局样式中使用过于通用的选择器，以减少潜在的冲突。

示例代码

<template>
  <div class="my-component">
    <b-button class="custom-button">Click me</b-button>
  </div>
</template>

<script>
export default {
  // ...
};
</script>

<style scoped>
.my-component .custom-button {
  background-color: blue; /* 这将覆盖Buefy/Bulma的默认按钮样式 */
}
</style>

通过上述方法，你可以更好地控制Vue组件内CSS与UI框架CSS之间的相互作用，确保样式的正确应用。