如何覆盖CDN引入的swiper.js自带CSS中按钮的top属性？

核心原因有两点：

1. 绝对定位元素同时设置top和bottom属性时，若元素已指定固定高度，top属性优先级高于bottom，你只设置了bottom:11px但没有覆盖默认的top:50%，导致样式不生效
2. 自定义样式选择器优先级不足，或CSS文件引入顺序有误

解决方案 #

• 方案1（推荐，无需使用!important）
  给选择器加上你当前Swiper容器的自定义类名提升优先级，同时重置默认top属性，示例如下：

  /* 替换 .your-swiper-container 为你自己的Swiper外层容器类名 */
  .your-swiper-container .swiper-button-next,
  .your-swiper-container .swiper-button-prev {
      top: auto; /* 必须项：清空默认top值 */
      bottom: 11px;
      transform: none; /* 可选：清除默认的垂直偏移transform */
      /* 你还可以在这里自定义左右偏移、大小等其他样式 */
  }
  

  同时确认你的自定义CSS文件引入顺序在swiper的CDN CSS文件之后，同优先级样式后引入的会覆盖先引入的样式。
• 方案2（使用!important）
  如果你不想加父级类名，需要同时给top和bottom都加上!important声明才能生效：

  .swiper-button-next,
  .swiper-button-prev {
      top: auto !important;
      bottom: 11px !important;
      transform: none !important;
  }
  

内容的提问来源于stack exchange，提问作者Amit kumar