css的有关优先级的一个问题

最新推荐文章于 2024-05-03 15:15:35 发布

小二百

最新推荐文章于 2024-05-03 15:15:35 发布

阅读量451

点赞数

分类专栏： css 文章标签： css jQuery 优先级

本文链接：https://blog.csdn.net/goupper1991/article/details/49641787

版权

css 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>jquery 项目</title>
    <script src="jquery.min.js"></script>
    <style type="text/css">
        .all{
            padding:0;
            text-align:center;
            width:841px;
            height:363px;
            margin-left:auto;
            margin-right:auto;
            overflow:hidden;
            position:relative;
        }
        .amg{
            width:2600px;
            height:363px;
            position:absolute;
            left:872px;
        }
        .all img{
            cursor: pointer;
        }
        .bn{
            /*z-index仅在定位中起作用*/
            position:absolute;
            /*在定位的标签里面的元素也需要使用定位，否则会被定位的元素覆盖导致不显示*/
            margin-top:320px;
            margin-left:740px;
        }

        .a,#b,#c{
             background:rgba(49, 49, 37, 0.66);
             color:#fff;

         }
        .bn .a:hover{
            background:rgb(187, 182, 26);
            color:green;
            cursor:pointer;
            font-size:18px;
        }
        .bn #b:hover{
            background:rgb(187, 182, 26);
            color:green;
            cursor:pointer;
            font-size:18px;
        }
        div .bn #c:hover{
            background:rgb(187, 182, 26);
            color:green;
            cursor:pointer;
            font-size:18px;
        }
        .bbn{
            background:rgb(187, 182, 26);
            color:green;
        }

    </style>
</head>
<body>
    <div class="all">
        <div class="amg">
            <img id="one" src="../images/2.png" />
            <img id="two" src="../images/3.jpg" />
            <img id="three" src="../images/4.jpg" />
        </div>
        <div class="bn">
            <a><button class="a" type="button">1</button></a><!--注意：如果不需要连接，一定要把href属性去掉，否则会出错。-->
            <a><button id="b" type="button">2</button></a>
            <a><button id="c" type="button">3</button></a>
        </div>
    </div>


    <script>
        $(document).ready(function(){
//            $("#a").css({"background":"rgb(187, 182, 26)","color":"green"});
            $(".a").addClass("bbn");
            /*wh:注意此处如果a为id，可以用$("#a").css(),但是不能用$("#a").addClass("bbn")，addClass()的效果会被上面#a的效果覆盖
            原因是id的优先级大于class，所以class的效果会被覆盖（通常用1表示标签名选择器的优先级，用10表示类选择器的优先级，用100标示ID选择器的优先级。
             标签内引入CSS的方式来写CSS，此时的优先级是最高的，为1000),但是可以使用$("#a").css()，因为此时的css相当于在标签内引入css，优先级最高，所以
             效果不会被覆盖*/
//            $("#a").addClass("bbn");
            $(".amg").animate({"left":"0"},500);
            $("#b").click(function(){
                $(".amg").animate({"left":"-872px"},500);//向左滑动效果
                $("#b").css({"background":"rgb(187, 182, 26)","color":"green"});
//                $("#b").addClass("bn");
                $(".a,#c").css({"background":"rgba(49, 49, 37, 0.66)","color":"#fff"});
                //$加多个id或者class时用逗号隔开，多个css用大括号，中间用逗号隔开
            });
            $("#c").click(function(){
                $(".amg").animate({"left":"-1744px"},500);
                $("#c").css({"background":"rgb(187, 182, 26)","color":"green"});
                $(".a,#b").css({"background":"rgba(49, 49, 37, 0.66)","color":"#fff"});
            });
            $(".a").click(function(){
                $(".amg").animate({"left":"0"},500);
                $(".a").css({"background":"rgb(187, 182, 26)","color":"green"});
                $("#b,#c").css({"background":"rgba(49, 49, 37, 0.66)","color":"#fff"});
            });
        })
    </script>