uniapp swiper引入css文件显示异常

Question

style 引入css文件出现问题
引入之前：

<view class="uni-margin-wrap">
            <swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
                :duration="duration">
                <swiper-item>
                    <image class="swiper-image" :src="imgUrl_1" mode="heightFix"></image>
                </swiper-item>
                <swiper-item>
                    <image class="swiper-image" :src="imgUrl_1" mode="heightFix"></image>
                </swiper-item>
                <swiper-item>
                    <image class="swiper-image" :src="imgUrl_1" mode="heightFix"></image>
                </swiper-item>
            </swiper>
        </view>
<style>
     .uni-margin-wrap {
        height:100%;
         margin:0 0upx;
     }
    .swiper {
         height: 300upx;
     }
     .swiper-item {
         display: block;
        line-height: 300upx;
         text-align: center;
     }
    .swiper-image{  
         width:100%;  
         height:300upx; 
     } 
    .swiper-list {
        margin-top: 400rpx;
        margin-bottom: 0;
    }
    .uni-common-mt {
        margin-top: 60rpx;
        position: relative;
    }
    .info {
        position: absolute;
        right: 20rpx;
    }
    .uni-padding-wrap {
        width: 550rpx;
        padding: 0 100rpx;
    }

</style>

界面是这样的：

引入后：

<view class="uni-margin-wrap">
            <swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
                :duration="duration">
                <swiper-item>
                    <image class="swiper-image" :src="imgUrl_1" mode="heightFix"></image>
                </swiper-item>
                <swiper-item>
                    <image class="swiper-image" :src="imgUrl_1" mode="heightFix"></image>
                </swiper-item>
                <swiper-item>
                    <image class="swiper-image" :src="imgUrl_1" mode="heightFix"></image>
                </swiper-item>
            </swiper>
        </view>
<style src="../../common/ii.css">
     .uni-margin-wrap {
        height:100%;
         margin:0 0upx;
     }
    .swiper {
         height: 300upx;
     }
     .swiper-item {
         display: block;
        line-height: 300upx;
         text-align: center;
     }
    .swiper-image{  
         width:100%;  
         height:300upx; 
     } 
    .swiper-list {
        margin-top: 400rpx;
        margin-bottom: 0;
    }
    .uni-common-mt {
        margin-top: 60rpx;
        position: relative;
    }
    .info {
        position: absolute;
        right: 20rpx;
    }
    .uni-padding-wrap {
        width: 550rpx;
        padding: 0 100rpx;
    }

</style>

界面是这样的：

起初我怀疑是样式冲突，所以我把css文件中相关的 swiper、image样式全删了，但是没有任何效果，最离谱的是我把css文件里的内容全部删除，把浏览器缓存也清空了，居然还是这样。总结一下，就是我引入了一个空的css文件，居然可以改变页面的样式！这是什么情况？

Answer 1

让阿豪来帮你解答，本回答参考chatgpt3.5编写提供，如果还有疑问可以评论或留言

问题：引入了CSS文件后，界面样式乱了。 解决方法：

1. 文件路径检查：确认CSS文件路径是否正确。
2. CSS代码检查：检查引入的CSS文件中是否存在错误。
3. CSS 权重问题：检查CSS属性权重，如果不正确，则当前CSS无法覆盖之前的CSS。可以使用“!important”关键字来提升属性的优先级，或者根据class和id等进行选择器优化。 示例代码： CSS文件（ii.css）内容： .uni-margin-wrap {
   height:100%;
   margin:0 0upx;
   }
   .swiper { height: 300upx;
   }
   .swiper-item {
   display: block;
   line-height: 300upx;
   text-align: center;
   }
   .swiper-image{
   width:100%;
   height:300upx;
   }
   .swiper-list {
   margin-top: 400rpx;
   margin-bottom: 0;
   }
   .uni-common-mt {
   margin-top: 60rpx;
   position: relative;
   }
   .info {
   position: absolute;
   right: 20rpx;
   }
   .uni-padding-wrap {
   width: 550rpx;
   padding: 0 100rpx;
   } 使用CSS文件的页面代码： <view class="uni-margin-wrap"> <image class="swiper-image" mode="heightFix"></image> <image class="swiper-image" mode="heightFix"></image> <image class="swiper-image" mode="heightFix"></image> </view>

<style src="../../common/ii.css"></style>