為什么只顯示em背景只顯示藍色
<style type="text/css">
/*在此定義相關CSS樣式*/
ul li{padding:0;margin:0;font-size:12px;}
.topList{
? ? width:300px;
? ? height:180px;
? ? border:1px solid #E8E8E8;
? ?margin:0 auto;
}
.topList ul {
??
? padding: 0 2px;
? height:28px;
}
.topList li{
? ?
? ? padding-right:2px;
? ? list-style-type:none;
? ??
? ?
? ??
}
.top em{
? ??
? ? ?background-color:blue;
? ?display:block;
? ? ?width:20px;
? ? height:16px;
? ? color:white;
? ? background: url( http://img1.sycdn.imooc.com//53cf0fa20001d3dc00200032.jpg)no-repeat ;
? ? ?background-position:0 0;
? ? ?line-height:16px;
}
em{
? ? font-style:normal;
? ? font-size:12px;
? ? float:left;
? display:block;
? ? width:20px;
? ? height:16px;
? ? text-align:center;
? ? color:#333;
? ?background-position:-16px 0 ;
? ? ?background: url( http://img1.sycdn.imooc.com//53cf0fa20001d3dc00200032.jpg)no-repeat ?;
? ? ?line-height:16px;
}
a{ ?
? ? font-size:12px;
? ? font-family:"微軟雅黑";
}
a:link,a:visited{
? ? text-decoration:none;
? ? color:gray;
}
a:hover,a :active{
? ? text-decoration:none;
? ? color:red;
}
</style>
2017-03-16
用上面的就可以了，我來解釋下，
1，em { }要放在上面，因為他指定了所有em標簽的樣式;這里邏輯就是，先給所有em設灰色背景，然后指定.top中的em背景為藍色，而你是，先給.top下的設藍色背景，然后給所有的em設灰色背景，所以就錯了，但是錯誤沒展示出來，因為還錯了兩個地方：
2、background-position: x y ; 請看文檔：x是水平方向，y是垂直方向，表示背景圖片的左上角尖尖相對于對象的位置，可以理解為絕對定位，左上角距離對象x像素，右上角距離對象y像素，這里是0 -16px ;這里要把圖片上移16像素，左邊不動；
http://www.w3school.com.cn/cssref/pr_background-position.asp
3、background-position要寫在background后面，或者直接在background里說明清楚，放在上面是不起作用的；如下正確：
background: url( http://img1.sycdn.imooc.com//53cf0fa20001d3dc00200032.jpg)no-repeat ;
background-position:0 0;
或者：background: url( http://img1.sycdn.imooc.com//53cf0fa20001d3dc00200032.jpg)? no-repeat ?0 -16px;
也可以，但是：
background-position:0 -16px;
background: url( http://img1.sycdn.imooc.com//53cf0fa20001d3dc00200032.jpg)? no-repeat ;
不行，因為background里面包含了background-position的設置，你先設置了background-position,又在background里沒有設置，不就相當于設置成0 0么，根據(jù)就近原則，自然是后面有效，background-position就成0 0了，不過這一點，我剛開始也沒看出來，后來想起來了，也是學到了，謝謝你~~
2017-03-16
em{
? ? font-style:normal;
? ? font-size:12px;
? ? float:left;
? display:block;
? ? width:20px;
? ? height:16px;
? ? text-align:center;
? ? color:#333;
? ?
? ? ?background: url( http://img1.sycdn.imooc.com//53cf0fa20001d3dc00200032.jpg)no-repeat ?;
? ? ?background-position:0 -16px ;
? ? ?line-height:16px;
}
.top em{
? ??
? ? ?background-color:blue;
? ?display:block;
? ? ?width:20px;
? ? height:16px;
? ? color:white;
? ? background: url( http://img1.sycdn.imooc.com//53cf0fa20001d3dc00200032.jpg)no-repeat ;
? ? ?background-position:0 0;
? ? ?line-height:16px;
}