CSS優先級問題?。。。?！
<!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的優先級不應該是后面的大于前面的嘛？
2020-03-22
css的優先級是后面大于前面，但是這個得是在權重一樣的情況下，權重不一樣的情況下權重大的優先。你.first_ ul li的權重大于.third li，為什么呢，class選擇器權重是10，標簽選擇器是1。(權重) .first_ ul li = 10 + 1 + 1 = 12。.third li = 10 + 1=11.。 12 > 11 所以無法覆蓋