老师，您好，为什么div ul li 的权值没有 div ul li ol的权值高呢？
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS运用</title>
<style type="text/css">
div{
background-color: #ececec;
}
.header,.footer{
background-color:#acacac;
}
div p span{
color: blue;
}
div p.title{
color: gray;
}
div ul li{
color:green;
}
div ul li ol{
color: red;
}
div ul li ul{
color: orange;
}
</style>
</head>
<body>
<div class="header">慕课网</div>
<div>
<div>
<p><span>HTML超文本标记语言</span>，“超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。</p>
<p class="title">课程内容</p>
<ul>
<li><a href="#">html基础标签</a>
<ol>
<li>段落标签</li>
<li>图像和超链接标签</li>
<li>列表标签</li>
</ol>
</li>
<li>html表格标签</li>
<li>html表单标签</li>
</ul>
</div>
<div>
<p><span>CSS层叠样式表</span>(Cascading Style Sheets),样式定义如何显示HTML元素。</p>
<p class="title">课程内容</p>
<ul>
<li><a href="#">CSS基础语法</a></li>
<li>CSS使用方法
<ol>
<li>行内样式</li>
<li>内部样式</li>
<li>外部样式</li>
</ol>
</li>
<li>CSS选择器
<ul>
<li>ID选择器</li>
<li>class选择器</li>
<li>标签选择器</li>
</ul>
</li>
</ul>
</div>
</div>
<div class="footer">慕课网 只学有用的</div>
</body>
</html>正常的情况下不应该是 div ul li ol的权值为4.div ul li的权值为3，但是显示的效果是div ul li的效果权值更高。
如果我按照下面这种写法就可以，这有点令我感觉到奇怪。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS运用</title>
<style type="text/css">
div{
background-color: #ececec;
}
.header,.footer{
background-color:#acacac;
}
div p span{
color: blue;
}
div p.title{
color: gray;
}
div ul li{
color:green;
}
div ul li a{
color:green;
}
div ul li ol li{
color: red;
}
div ul li ul li{
color: orange;
}
</style>
</head>
<body>
<div class="header">慕课网</div>
<div>
<div>
<p><span>HTML超文本标记语言</span>，“超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。</p>
<p class="title">课程内容</p>
<ul>
<li><a href="#">html基础标签</a>
<ol>
<li>段落标签</li>
<li>图像和超链接标签</li>
<li>列表标签</li>
</ol>
</li>
<li>html表格标签</li>
<li>html表单标签</li>
</ul>
</div>
<div>
<p><span>CSS层叠样式表</span>(Cascading Style Sheets),样式定义如何显示HTML元素。</p>
<p class="title">课程内容</p>
<ul>
<li><a href="#">CSS基础语法</a></li>
<li>CSS使用方法
<ol>
<li>行内样式</li>
<li>内部样式</li>
<li>外部样式</li>
</ol>
</li>
<li>CSS选择器
<ul>
<li>ID选择器</li>
<li>class选择器</li>
<li>标签选择器</li>
</ul>
</li>
</ul>
</div>
</div>
<div class="footer">慕课网 只学有用的</div>
</body>
</html>麻烦老师能否帮我解释一下呢，按照权值判断应该是上面那段代码就可以生效的呀，想不明白有点。
10
收起
正在回答
1回答
同学你好，需要考虑就近原则。
文字样式是li显示的，所以给li直接设置样式生效；但是div ul li ol这样是给ol设置的，li如果使用ol的样式是继承，按照继承的权值算，不能是标签的权值，所以不会生效。
另外第二段代码实现效果很棒！
祝学习愉快~
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星