我问的问题在加下划线的备注那里,是div标签选择器与.div类选择器的设置背景颜色的问题

我问的问题在加下划线的备注那里,是div标签选择器与.div类选择器的设置背景颜色的问题

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

<title>CSS运用</title>

<style type="text/css">

  /*补充样式*/

   span{

       color:blue;

   }

   div .classw{

       color:gray;

   }

   div ul ol li{

       color:red;

   }

   div ul li{

       color:green;

   }

   /*设置类div1类选择器,权值为10。*/

   .div1{

       background:#ccc;

   }

   /*设置标签div标签,权值为1。*/

   div{

       background:#999;

       font-weight:bold;

       font-size:20px;

   }

</style>

</head>

<body>

<div>慕课网</div>                <!--显示的是div标签选择器的格式内的,这一点是没问题的-->

<div class = "div1">             <!--为什么这里的整个div块显示的是div标签选择器的格式,而不是由更高优先度.div1类选择器设置的css格式-->

    <div>

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

        <p class = "classw">课程内容</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 = "classw">课程内容</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到这里的背景显示的是div标签,而不是.div1类选择器的-->



<div>慕课网 只学有用的</div>

</body>

</html>


正在回答

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

2回答
div {
        background: #999;
        font-weight: bold;
        font-size: 20px;
    }

直接设置div相当于全局属性,意思是设置HTML中所有的div背景色都是#999;当你给div1设置了#ccc的背景色以后,只是将class为div1的这个div的背景色设置成了#ccc,而class为div1的div里面的子元素div则继承div {background: #999; font-weight: bold;font-size: 20px;}这个全局div的样式,因此这里不仅涉及选择器的权重,还涉及继承问题,建议修改成

div.div1,div.div1 div {
    /*background: #ccc;*/
    background:#ccc;
}

希望可以帮到你!

  • CanisRufus 提问者 #1
    直接设置div,会覆盖掉其他div的颜色,包括会覆盖掉有id选择器标记或类选择器标记的具有更高权值的属性(颜色)吗?如果可以,那问题来了,为什么直接设置div会覆盖权值比他更高的选择器呢?
    2017-08-08 20:21:56
  • 卡布琦诺 回复 提问者 CanisRufus #2
    直接设置div相当于全局属性,意思是设置HTML中所有的div背景色都是#999;当你给div1设置了#ccc的背景色以后,只是将class为div1的这个div的背景色设置成了#ccc,而class为div1的div里面的子元素div则继承div {background: #999; font-weight: bold;font-size: 20px;}这个全局div的样式,因此这里不仅涉及选择器的权重,还涉及继承问题。祝学习愉快!
    2017-08-08 21:36:11
  • CanisRufus 提问者 回复 卡布琦诺 #3
    好的懂了,谢谢!
    2017-08-08 22:20:04
提问者 CanisRufus 2017-08-08 19:17:16

是不能直接对div标签选择器进行设置的吗?

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

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

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

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

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

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

在线咨询

领取优惠

免费试听

领取大纲

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