css 层的嵌套

Posted 2020-07-27 ruoyuting

html 

<div class="menu">
<ul>
<li><a class="li1" title="办公"></a></li>
<li><a class="li2 this" title="人事"></a></li>
<li><a class="li3" title="培训"></a></li>
<li><a class="li4" title="考勤"></a></li>
<li><a class="li5" title="绩效"></a></li>
<li><a class="li6" title="工资"></a></li>
<li><a class="li7" title="物品"></a></li>
<li><a class="li8" title="报表"></a></li>
</ul>
</div>

 

css

.menu
{
margin-top: 10px;
margin-left: 0px;
width: 560px;
height: 31px;
display: inline-block;
}

.menu ul li a
{
width: 60px;
height: 31px;
display: inline-block;
background: url(../Images/headerimg.png) no-repeat;
margin-right: 7px;
}

.menu ul li
{
display: inline-block;
}

.menu ul li a.li1
{
background-position: -12px -5px;
}
.menu ul li a.li1:hover
{
background-position: -12px -45px;
}
.menu ul li a.li1.this
{
background-position: -12px -45px;
}

.menu ul li a.li2
{
background-position: -78px -5px;
}
.menu ul li a.li2:hover
{
background-position: -78px -45px;
}
.menu ul li a.li2.this
{
background-position: -78px -45px;
}

 

a.li2.this 是指在当前a标签的两个class （li2、this），儿这样写a.li2.this 是指this只能在a有li2的前提下才能起作用！