老师这样写效果是可以实现的,但是为啥给ul li 已经设置了类,当给li1设置绿色,所有都变成绿色

老师这样写效果是可以实现的,但是为啥给ul li 已经设置了类,当给li1设置绿色,所有都变成绿色

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

     <title>CSS运用</title>

     <style type="text/css">

        /*补充样式*/

       #top{background:gray;font-size:30px;}

       .body{background:#ECECEC;}

       p span{color:blue;}

       .p1,.p2{color:gray;}

       li.li1 a{color: green;}

       ul .li1{color:green;}

       ol .li2{color: red;}

       ul .li3{color:orange;}

       ul li a:hover{color:blue;}

       .tfoot{background:gray;font-size:30px;}

     </style>

</head>

<body>

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

<div class="body">

    <div>

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

          <p class="p1">课程内容</p>

          <ul>

               <li class="li1"><a href="#">html基础标签</a>

                    <ol>

                         <li class="li2">段落标签</li>

                         <li class="li2">图像和超链接标签</li>

                         <li class="li2">列表标签</li>

                    </ol>

               </li>

               <li class="li1">html表格标签</li>

               <li class="li1">html表单标签</li>

          </ul>               

     </div>

     <div>

          <p><span>CSS层叠样式表</span>(Cascading Style Sheets),样式定义如何显示HTML元素。</p>       

          <p class="p2">课程内容</p>

          <ul>

               <li class="li1"><a href="#">CSS基础语法</a></li>

               <li class="li1">CSS使用方法

                    <ol>

                         <li class="li2">行内样式</li>

                         <li class="li2">内部样式</li>

                         <li class="li2">外部样式</li>

                    </ol>

               </li>

               <li class="li1">CSS选择器

                    <ul>

                         <li class="li3">ID选择器</li>

                         <li class="li3">class选择器</li>

                         <li class="li3">标签选择器</li>

                    </ul>

               </li>

          </ul>               

     </div>

</div>

<div class="tfoot">慕课网 只学有用的</div>     

</body>


正在回答 回答被采纳积分+1

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

5回答
好帮手慕言 2020-01-15 09:46:23

同学你好,一般情况下是可以这样理解的,但是也有比较特殊的,比如a标签,会使用自己的默认样式,不继承父级设置的样式,例子:
http://img1.sycdn.imooc.com//climg/5e1e6e8c095f4fa005510342.jpg

效果(并不是红色):

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

如果还有其他疑问,建议在问答区重新提问,便于后期查找总结

如果我的回答帮到了你,欢迎采纳,祝学习愉快~

好帮手慕言 2020-01-14 18:40:39

同学你好,因为有些li元素是在类名为li1元素里面,所以是会继承的。

如果我的回答帮到了你,欢迎采纳,祝学习愉快~

  • 老师,那意思是如果给父元素设置样式,子元素没有设置样式,则子元素会继承父元素样式,如果给子元素设置了样式,那么子元素会使用自己的样式?
    2020-01-15 08:36:37
提问者 未来it界的一枚程序媛 2020-01-14 16:20:09

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

老师就是这样写不是就是给ul底下类名为li1的元素  设置字体颜色为绿色,但是为啥所有的li都变成绿色

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

好帮手慕言 2020-01-14 15:00:57

同学你好,整体效果实现的不错,另外:不是很明白同学的疑问是什么,可以配合图文详细的描述下,老师帮助解答。祝学习愉快~

  • 老师我不知道怎么给您的底下回复图片,就把图片写在回答里了
    2020-01-14 16:21:21
提问者 未来it界的一枚程序媛 2020-01-14 11:33:03

代码中  头部和脚部  可以设置相同的类

class=“headFoot”

.headFoot{background:gray;font-size:30px;}

问题已解决,确定采纳
还有疑问,暂不采纳

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

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

0 星
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

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