5-4代码优化的问题

5-4代码优化的问题

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

<title>CSS运用</title>

<style type="text/css">

*{font-size:18px;}

.header,.footer{

    background-color:gray;

    font-size:24px;

    font-weight:bold;

        }/*页头*//*页尾*/

 ul li,a:link{color:green;}

 p span,a:hover{color:blue;}

 .main-title{color:gray;}

 ol li{color:red;}

 ul li ul li{color:yellow;}

  /*补充样式*/

</style>

</head>

<body>

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

<div>

    <div>

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

<p class="main-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="main-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>

请问老师最底下无序列表的黄色代码还可以怎么表现,另外现在这种CSS的填写方式可以么?谢谢

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

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

3回答
提问者 叶松舍 2017-08-21 12:52:28

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

<title>CSS运用</title>

<style type="text/css">

*{font-size:18px;}

.header,.footer{

    background-color:gray;

    font-size:24px;

    font-weight:bold;

        }/*页头*//*页尾*/

 ul li,a:link{color:green;}

 p span,a:hover{color:blue;}

 .main-title{color:gray;}

 ol li{color:red;}

 ul li .aaa{color:yellow;}

  /*补充样式*/

</style>

</head>

<body>

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

<div>

    <div>

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

<p class="main-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="main-title">课程内容</p>

<ul>

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

<li>CSS使用方法

<ol>

<li>行内样式</li>

<li>内部样式</li>

<li>外部样式</li>

</ol>

</li>

<li>CSS选择器

<ul>

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

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

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

</ul>

</li>

</ul>

</div>

</div>

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

</body>

</html>

因为想将ul li ul li{color:yellow;}这段代码优化一下,但发现<ul>里添加class还是显示的绿色,所以尝试在<li>里添加class,成功显示为黄色。

我又尝试在<ul>里添加class,<ul class="aaa">,前几次尝试每次代码写成ul li .aaa{color:yellow;}就终止,这次尝试多加一个li                    ul li .aaa li{color:yellow;}显示效果也成功为黄色。

是不是到这一步优化已经可以了?


卡布琦诺 2017-08-21 11:59:16

http://img1.sycdn.imooc.com/climg//599a5a2b0001c58308730696.jpg

我测试你的代码是显示的黄色的;建议亲清除一下浏览器的历史记录,关闭浏览器,再重新打开测试一下!

  • 提问者 叶松舍 #1
    我完成作业的时候也是显示的黄色,但是我的代码是 ul li ul li{color:yellow;}这样的,想问一下这一步怎么优化,因为我尝试添加了class,但显示的是绿色的
    2017-08-21 12:31:04
卡布琦诺 2017-08-21 10:30:56

就你本段代码而言,效果实现的很好,关于黄色字体代码的部分,你还可以给ul设置class,然后直接设置其class的样式,祝学习愉快~

  • 提问者 叶松舍 #1
    我试过,可颜色显示还是绿色的
    2017-08-21 11:45:43
问题已解决,确定采纳
还有疑问,暂不采纳

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

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

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

在线咨询

领取优惠

免费试听

领取大纲

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