我使用bootstrap vue toast来显示成功消息。
<b-toast id="example-toast" title="BootstrapVue" static no-auto-hide>
Hello, world! This is a toast message.
</b-toast>
我添加了这个CSS以在top: 90px上显示它
.b-toaster.b-toaster-top-right,
.b-toaster.b-toaster-top-left,
.b-toaster.b-toaster-top-center,
.b-toaster.b-toaster-top-full{
top: 90px;
}
仅在一个组件中需要top: 50px但当在特定组件中添加新的CSS时，
.b-toaster.b-toaster-top-right,
.b-toaster.b-toaster-top-left,
.b-toaster.b-toaster-top-center,
.b-toaster.b-toaster-top-full{
top: 50px;
}
它将在所有其他组件中进行更改。如何仅在一个组件(top: 50px(上更改CSS，而其他组件具有top: 90px？
我认为这里有两种方法：
更好的方式：
使用自定义类名，如class='myCustomAlert'和global.css:
.myCustomAlert {
top: 50px !important;
}
另一种方式(这是不推荐使用，但正是您的情况(
使用/deep/选择器：
/deep/ .b-toaster.b-toaster-top-right,
.b-toaster.b-toaster-top-left,
.b-toaster.b-toaster-top-center,
.b-toaster.b-toaster-top-full {
top: 50px;
}
我不建议使用/deep/选择器，但您知道这一点很好。