<!DOCTYPE html>
<html>
<head>
<title>
侧栏导航跟随案例
</title>
<style type="text/css">
*{padding: 0;
margin:0;}
.backg{
width: 100%;
height: 5000px;
background: url("mooc.png");
}
.main{
width: 160px;
height: auto;
position: fixed;
left:0;
top:50%;
margin-top: -103px;
}
.main .first_{
width: 160px;
height: auto;
border:1px solid #fff;
background: #ccc;
line-height: 40px;
text-align: center;
color: #fff;
}
.txt{
width: 160px;
height: 40px;
}
.first_ ul{
width: 160px;
height: auto;
display: none;
}
.first_ ul li{
width: 160px;
height: 40px;
border:1px solid #fff;
background: #d60;
line-height: 40px;
text-align: center;
color: #red;
}
.first_:hover>ul{
display: block;
}
.third{
position: relative;
left: 161px;
top:-40px;
list-style:none;
}
.third li{
width: 160px;
height: 40px;
border:1px solid #fff;
background: #333;
line-height: 40px;
text-align: center;
color: #fff;
}
.first_ ul li:hover .third{
display: block;
}
</style>
</head>
<body>
<div class="backg">
<div class="main">
<div class="first_">
<div class="txt">公司简介</div>
<ul>
<li>
二级目录
<ul class="third">
<li>三级目录</li>
<li>三级目录</li>
<li>三级目录</li>
</ul>
</li>
<li>二级目录</li>
<li>二级目录</li>
</ul>
</div>
<div class="first_"><div class="txt">公司简介</div>
<ul>
<li>二级目录</li>
<li>二级目录</li>
<li>二级目录</li>
</ul></div>
<div class="first_"><div class="txt">公司简介</div>
<ul>
<li>二级目录</li>
<li>二级目录</li>
<li>二级目录</li>
</ul></div>
<div class="first_"><div class="txt">公司简介</div>
<ul>
<li>二级目录</li>
<li>二级目录</li>
<li>二级目录</li>
</ul></div>
<div class="first_"><div class="txt">公司简介</div>
<ul>
<li>二级目录</li>
<li>二级目录</li>
<li>二级目录</li>
</ul></div>
</div>
</div>
</body>
</html>
为什么.third li{}不能覆盖掉.first_ ul li{}的样式问题？CSS的优先级不应该是后面的大于前面的嘛？
css的优先级是后面大于前面，但是这个得是在权重一样的情况下，权重不一样的情况下权重大的优先。你.first_ ul li的权重大于.third li，为什么呢，class选择器权重是10，标签选择器是1。(权重) .first_ ul li = 10 + 1 + 1 = 12。.third li = 10 + 1=11.。 12 > 11 所以无法覆盖