为什么底下加粗的样式无法实现?用的ID选择器,然后再加了!important,都不能实现呢?

为什么底下加粗的样式无法实现?用的ID选择器,然后再加了!important,都不能实现呢?

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

<title>CSS运用</title>

<style type="text/css">

   /*补充样式*/

   .header,.footer{background:gray;font-weight:bold;}

   .main{background:silver;}

   p span{color:blue;}

   a:hover{color:blue;}

   ul li,a{color:green;}

   li ol li{color:red;}

   #yellow{color:yellow !important;}

</style>

</head>

<body>

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

<div class="main">

    <div class="content1">

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

<p style="color:gray;">课程内容</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 class="center2">

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

<p style="color:gray;">课程内容</p>

<ul>

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

<li>CSS使用方法

<ol>

<li>行内样式</li>

<li>内部样式</li>

<li>外部样式</li>

</ol>

</li>

<li>CSS选择器

<ul ID="yellow">

<li>ID选择器</li>

<li>class选择器</li>

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

</ul>

</li>

</ul>

</div>

</div>

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

</body>

</html>


正在回答

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

2回答

同学你好!

字体颜色设置为黄色!important是给 ul 设置的,它的权值最高。但是如果让字体变成黄色,要通过ul查找li

内部的ul li 直接可给li设置字体颜色为绿色,这里不需要通过查找 所以还是绿色是生效的

同学可以写成这样,这种情况是关系远近一样 但是!important权值最高,所以黄色生效:

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

同学可以试着理解一下它们之间的层级关系。

如果帮助到了你,欢迎采纳 祝学习愉快~

好帮手慕码 2019-04-26 12:08:12

同学你好!

虽然#yellow的优先级较高,

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

但是因为 就近原则 对字体设置的绿色覆盖了黄色因此还是绿色生效的

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

如果帮助到了你 欢迎采纳 祝学习愉快~

  • 提问者 为你浅笑 #1
    没明白,权值不同,不是使用权值高的吗,为什么还要去看就近选择呢,而且就近原则来看的话,我的id选择器不是放在最靠近元素吗?
    2019-04-26 12:20:59
问题已解决,确定采纳
还有疑问,暂不采纳

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

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

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

在线咨询

领取优惠

免费试听

领取大纲

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