<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
/*空格 后代选择器 :作用于所有后代级*/
#container div{
color: #ff7300;
}
#container1 div{
background-image: url("../img/icon.gif");
height: 25px;
width: 25px;
color: #ff7300;
background-repeat: no-repeat;
}#div2{
background-position: -42px 0;
}
#div3{
background-position:-166px -25px;
}
#div4{
background-position:0 -165px;
}
</style>
<title>雪碧图</title>
</head>
<body>
<div id="container">
父div1
<div>子div1
<div>
孙div
</div>
</div>
<div>子div2</div>
<div>子div3</div>
</div>
<div id="container1"> <div></div> <div id="div2"></div> <div id="div3"></div> <div id="div4"></div></div></body></html>
icon.gif