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

来源：互联网发布：财经类报纸知乎编辑：程序博客网时间：2024/05/29 13:17
<!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>
0 0