CSS优先级问题!!!!!

来源:4-2 侧边栏导航跟随案例

慕无忌4172087

2020-03-18 15:52

<!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的优先级不应该是后面的大于前面的嘛?

写回答 关注

1回答

  • 此去经年01
    2020-03-22 22:17:37
    已采纳

    css的优先级是后面大于前面,但是这个得是在权重一样的情况下,权重不一样的情况下权重大的优先。你.first_ ul li的权重大于.third li,为什么呢,class选择器权重是10,标签选择器是1。(权重) .first_ ul li = 10 + 1 + 1 = 12。.third li = 10 + 1=11.。 12 > 11 所以无法覆盖

    慕无忌417...

    受教了,谢谢!

    2020-03-23 11:57:14

    共 1 条回复 >

css定位 position

老师带你了解CSS中定位的知识,并运用到实际案例中。

49043 学习 · 92 问题

查看课程

相似问题