                        課程
                    
                        /前端開發(fā)
                        
                            /HTML/CSS
                        
                        /css定位 position

CSS優(yōu)先級問題！?。。。?/h1>
<!DOCTYPE html>
<html>
<head>
<title>
側(cè)欄導(dǎo)航跟隨案例
</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的優(yōu)先級不應(yīng)該是后面的大于前面的嘛？

慕無忌4172087

2020-03-18

源自：css定位 position 4-2

關(guān)注問題我要回答

938

操作

收起

1 回答

此去經(jīng)年01 回答被采納 +2 積分
2020-03-22

css的優(yōu)先級是后面大于前面，但是這個(gè)得是在權(quán)重一樣的情況下，權(quán)重不一樣的情況下權(quán)重大的優(yōu)先。你.first_ ul li的權(quán)重大于.third li，為什么呢，class選擇器權(quán)重是10，標(biāo)簽選擇器是1。(權(quán)重) .first_ ul li = 10 + 1 + 1 = 12。.third li = 10 + 1=11.。 12 > 11 所以無法覆蓋