在选择器最后面没有加li 就没有显示红色 为什么要加li

在选择器最后面没有加li 就没有显示红色 为什么要加li

正在回答

登陆购买课程后可参与讨论,去登陆

3回答

同学你好,不添加li的话,是设置给ol红色,li是继承ol的红色显示。

但是上面有直接设置给li的颜色,如下,继承来的没有设置设置给自己的优先级高哦,所以显示的是绿色。添加上li的话,也是直接设置给自己的了,作用于同于元素的选择器,然后比较权值,权值大的显示。

http://img1.sycdn.imooc.com//climg/5c3f05f400013b9c03180096.jpg

希望能帮助到你,欢迎采纳。

祝学习愉快!

提问者 Alvin24 2019-01-16 18:17:14

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

<title>CSS运用</title>

<style type="text/css">

   /*补充样式*/

              #header,#footer{background: #999;}

              #main{background: #eee;}

              #main div p span{color: blue;}

              #main div .kc{color: #999;}

              #main div ul li{color: green;}

              #main div ul li ol{color: red;}

              #main div ul li ul li{color: orange;}

              #main div ul li a:link{color: green;}


    </style>

</head>


<body>

<div id="header">慕课网</div>

<div id="main">

    <div>

<p><span>HTML超文本标记语言</span>,“超文本”就是指页面内可以包含图片、链接,甚至音乐、程序等非文字元素。</p>

<p class="kc">课程内容</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="kc">课程内容</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 id="footer">慕课网 只学有用的</div>

</body>

</html>


好帮手慕糖 2019-01-16 18:09:00

同学你好,不知道css如何设置的,不能准确的确定问题,建议:可以直接将代码粘贴过来,便于准确的定位与解决问题。

祝学习愉快!

  • 提问者 Alvin24 #1
    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS运用</title> <style type="text/css"> /*补充样式*/ #header,#footer{background: #999;} #main{background: #eee;} #main div p span{color: blue;} #main div .kc{color: #999;} #main div ul li{color: green;} #main div ul li ol{color: red;} #main div ul li ul li{color: orange;} #main div ul li a:link{color: green;} </style> </head> <body> <div id="header">慕课网</div> <div id="main"> <div> <p><span>HTML超文本标记语言</span>,“超文本”就是指页面内可以包含图片、链接,甚至音乐、程序等非文字元素。</p> <p class="kc">课程内容</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="kc">课程内容</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 id="footer">慕课网 只学有用的</div> </body> </html>
    2019-01-16 18:17:58
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
前端小白入门系列课程
  • 参与学习           人
  • 提交作业       11218    份
  • 解答问题       36713    个

从一个不会编程的小白到一个老司机是需要过程的,首先得入门,学习基础知识,然后才能进阶,最后再到精通,本专题是你走进前端世界的不二选择!

了解课程
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师