今天发现了css中的一个顺序问题

最新推荐文章于 2022-04-25 22:17:45 发布

mtdyxsp

最新推荐文章于 2022-04-25 22:17:45 发布

阅读量367

点赞数

分类专栏： CSS

本文链接：https://blog.csdn.net/mtdyxsplzm/article/details/52056110

版权

CSS 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

这几天正在自学中。。。

今天发现一个顺序的问题，之前自学的时候没有看过谁讲这个问题。

这个demo是关于轮播图的

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="carouselfigure.css">
    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
    <script src="carouselfigure.js"></script>
</head>
<body>
<div id="igs">
    <div class="ig"><img src="../image/1.jpg"></div>
    <div class="ig"><img src="../image/2.jpg"></div>
    <div class="ig"><img src="../image/3.jpg"></div>
    <div class="ig"><img src="../image/4.jpg"></div>
    <div class="ig"><img src="../image/5.jpg"></div>
    <div class="ig"><img src="../image/6.jpg"></div>
</div>
<div class="btn btn1">
    <
</div>
<div class="btn btn2">
    >
</div>
<div id="tabs">
    <div class="tab bg">1</div>
    <div class="tab">2</div>
    <div class="tab">3</div>
    <div class="tab">4</div>
    <div class="tab">5</div>
    <div class="tab">6</div>
</div>
</body>
</html>

CSS

* {
    margin: 0;
    padding: 0;
}

.ig{
    position: absolute;
}
.btn{
    position:absolute;
    width:60px;
    height:90px;
    background:rgba(0,0,0,0.5);
    color:#fff;
    font-size:24px;
    text-align: center;
    line-height:90px;
    top:155px;
    cursor:pointer;
}

.btn2{
    left:840px;
}
#tabs{
    position:absolute;
    top:360px;
    left:330px;
}
.tab{
    width:30px;
    height:30px;
    background:#5388e8;
    color:#fff;
    text-align:center;
    line-height:30px;
    float:left;
    margin-right:10px;
    border-radius:100%;
    cursor:pointer;
}
.bg{
    background: #ff0000;
}

var i = 0;
var timer;
$(function () {
   

    $('.ig').eq(0).show().siblings().hide();
    showTime();
    $('.tab').hover(function () {
        i = $(this).index();
        show();
        clearInterval(timer);
    }, function () {
        showTime();
    });

    $('.btn1').click(function () {
        clearInterval(timer);
        if(i==0){
            i=6;
        }
        i--;
        show();
        showTime();
    });

    $('.btn2').click(function () {
        clearInterval(timer);
        if(i==5){
            i=-1;
        }
        i++;
        show();
        showTime();
    });
});
function show() {
    $('.ig').eq(i).fadeIn(300).siblings().fadeOut(300);
    $('.tab').eq(i).addClass('bg').siblings().removeClass('bg');
}
function showTime() {
    timer = setInterval(function () {
        i++;
        if (i == 6) {
            i = 0;
        }
        show();
    }, 4000);
}

注意

原来我把CSS中的".bg"写到了“.btn”下面，然后红色的样式不会出现，只有加到“.tab”下面才显示

原来错误的CSS写法

* {
    margin: 0;
    padding: 0;
}

.ig{
    position: absolute;
}
.btn{
    position:absolute;
    width:60px;
    height:90px;
    background:rgba(0,0,0,0.5);
    color:#fff;
    font-size:24px;
    text-align: center;
    line-height:90px;
    top:155px;
    cursor:pointer;
}

.bg{
    background: #ff0000;
}

.btn2{
    left:840px;
}
#tabs{
    position:absolute;
    top:360px;
    left:330px;
}
.tab{
    width:30px;
    height:30px;
    background:#5388e8;
    color:#fff;
    text-align:center;
    line-height:30px;
    float:left;
    margin-right:10px;
    border-radius:100%;
    cursor:pointer;
}

这是为什么呢？