如何禁用/删除/覆盖 CDN 的 css 属性答案

【问题标题】：how to disable/remove/override css property of a CDN如何禁用/删除/覆盖 CDN 的 css 属性
【发布时间】：2022-01-07 21:31:18
【问题描述】：

我通过 CDN 使用 swiper.js...问题是在 swiper-bundle.min.css CDN 文件 .swiper-button-next, .swiper-button-prev 设置为 top:50%; 如下：-

.swiper-button-next, .swiper-button-prev {
    position: absolute;
    top: 50%;
}

我想将 .swiper-button-next, .swiper-button-prev 设置为 bottom:11px; 我尝试在自己的 css 文件中进行设置，但 CDN 的 top:50% 覆盖了它。我也尝试过使用!important，但什么也没发生。

【问题讨论】：

【解决方案1】：

您可以在项目的主 css 文件中选择相同的类，并使用 !important 关键字进行样式设置。

.swiper-button-next, .swiper-button-prev {
    position: absolute;
    top: unset !important;
    bottom: 11px;
}

Here is fiddle with a simple example。在这个 Fiddle 中，我包含了 bootstrap CDN 并覆盖了 .container 类的填充来演示

【讨论】：