<!DOCTYPE?html>
<html>
<head>
??<meta?charset="UTF-8">
??<title>sidebar</title>
??<style?type="text/css">
????*{margin:?0;padding:?0;font:?normal?14px?"微軟雅黑";}
????.cat{
??????margin:?30px?20px;
??????padding:?5px?10px;
??????width:?140px;
??????text-align:?center;
??????position:?relative;
??????list-style:none;
??????border:?1px?solid?#D1D1D1;
????}
????.cat?li{
??????height:?30px;
??????line-height:?30px;
??????border-bottom:1px?solid?#D1D1D1;
??????padding:?10px?10px?0px?10px;
????}
????.cat8{
??????border-bottom:?none;
????}
????.cat?li?i{
??????width:24px;
??????height:24px;
??????background:?url(http://img1.sycdn.imooc.com//539a950e00015ba500710200.jpg);
??????float:left;
??????display:?inline;
????}
????.cat1?i{background-position:?0?0px;}
????.cat2?i{background-position:?0?-24px;}
????.cat3?i{background-position:?0?-48px;}
????.cat4?i{background-position:?0?-72px;}
????.cat5?i{background-position:?0?-96px;}
????.cat6?i{background-position:?0?-120px;}
????.cat7?i{background-position:?0?-144px;}
????.cat8?i{background-position:?0?-168px;}
??</style>
</head>
<body>
??<div>
??????<ul?class="cat">
????????<li?class="cat1"><i></i>服裝內(nèi)衣</li>
????????<li?class="cat2"><i></i>鞋包配飾</li>
????????<li?class="cat3"><i></i>運動戶外</li>
????????<li?class="cat4"><i></i>珠寶手表</li>
????????<li?class="cat5"><i></i>手機數(shù)碼</li>
????????<li?class="cat6"><i></i>家電辦公</li>
????????<li?class="cat7"><i></i>護膚彩妝</li>
????????<li?class="cat8"><i></i>母嬰用品</li>
??????</ul>
??</div>
</body>
</html>
2015-09-14
與選擇器的優(yōu)先級有關。一般而言，選擇器指向的越準確，它的優(yōu)先級就越高。分析下面的優(yōu)先級代碼：
.cat1?i{background-position:?0?0px;} ?//優(yōu)先級總值?。保?１.cat?li?i{??????width:24px; ??????height:24px; ??????background:?url(http://img1.sycdn.imooc.com//539a950e00015ba500710200.jpg); ??????float:left; ??????display:?inline; ????}????????????????????????????????//?優(yōu)先級總值 10+１+１而瀏覽器渲染模板的邏輯，選擇器指向?qū)ο笙嗤那闆r下，只會執(zhí)行優(yōu)先級值高的，所以
你可以這樣寫就行了 將
.cat?li?i{??????width:24px; ??????height:24px; ??????background:?url(http://img1.sycdn.imooc.com//539a950e00015ba500710200.jpg); ??????float:left; ??????display:?inline; ????}改為
i{??????width:24px; ??????height:24px; ??????background:?url(http://img1.sycdn.imooc.com//539a950e00015ba500710200.jpg); ??????float:left; ??????display:?inline; ????}或者這樣 將所有形如這樣的
?.cat1?i{background-position:?0?0px;}改為這樣就可以了
?li.cat1?i{background-position:?0?0px;}????//該處選擇器指向更準確，值更高