css应用5.4编程练习

css应用5.4编程练习

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

<title>CSS运用</title>

<style type="text/css">

div{color:green;}

.head,.end{color:black;font-size:30px;background-color:gray;font-weight:bold;}

div p.title{color:gray;}

div .one,.two{color:red;}

div .three{color:orange;}

div p span{color:blue;font-size:20px;}

div p.body{color:black;}

a:link{color:green;}

a:visited{color:green;}

a:hover{color:blue;}

</style>

</head>

<body>

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

<div>

    <div>

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

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

<ul>

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

<ol class="one">

<li>段落标签</li>

<li>图像和超链接标签</li>

<li>列表标签</li>

</ol>

</li>

<li>html表格标签</li>

<li>html表单标签</li>

</ul>

</div>

<div>

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

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

<ul>

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

<li>CSS使用方法

<ol class="two">

<li>行内样式</li>

<li>内部样式</li>

<li>外部样式</li>

</ol>

</li>

<li>CSS选择器

<ul class="three">

<li>ID选择器</li>

<li>class选择器</li>

<li>标签选择器</li>

</ul>

</li>

</ul>

</div>

</div>

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

</body>

</html>


不是*选择器的权值是最低的吗,为什么css代码第一行div{color:green;}改为*{color:green;}之后,所有字都变成绿色了?


正在回答

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

3回答

通配符的权值虽然低,但是也比继承来的样式优先级高。要注意:li标签内的文字颜色是继承父元素ol或ul的(父元素的样式就是通过类设置的那些)。如果使用*的话,就相当于给每个元素都定义了样式,包括li,li自己有了样式,就会覆盖掉继承父元素的。

如果使用div的话,只是给div元素设置了样式,li还是只能从父元素上继承。


怎么都被占用了呢 2017-11-21 19:03:17

是的,直接给li标签设置的话,就比通配符的优先级高了。

怎么都被占用了呢 2017-11-20 18:04:15

因为颜色样式都是通过类名设置在父元素上的,li的颜色从父元素上继承而来。*是通配符,相当于通过标签设置样式,通过标签选择器设置的样式比继承来的样式优先级要大。

  • 通配符的权值不是最低吗,我在第一行用*{color:green;}给所有元素设置绿色的样式,在下面用标签选择器和类选择器设置的样式为什么不能覆盖?第一行如果换成div{color:green;}后面设置的样式都可以覆盖。
    2017-11-21 18:07:57
问题已解决,确定采纳
还有疑问,暂不采纳

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

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

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

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

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

在线咨询

领取优惠

免费试听

领取大纲

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