后代选择器，雪碧图

来源：互联网发布：哪里可以学淘宝美工编辑：程序博客网时间：2024/04/29 22:25

<!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

0 0