我问的问题在加下划线的备注那里，是div标签选择器与.div类选择器的设置背景颜色的问题
来源：5-4 编程练习
CanisRufus
2017-08-08 19:07:29
<!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; }希望可以帮到你！
0h017-08-08 -
CanisRufus
提问者
2017-08-08
是不能直接对div标签选择器进行设置的吗？
0
相似问题