我问的问题在加下划线的备注那里,是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>
正在回答
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; }
希望可以帮到你!
是不能直接对div标签选择器进行设置的吗?
相似问题
登录后可查看更多问答,登录/注册
- 参与学习 人
- 提交作业 11218 份
- 解答问题 36713 个
从一个不会编程的小白到一个老司机是需要过程的,首先得入门,学习基础知识,然后才能进阶,最后再到精通,本专题是你走进前端世界的不二选择!
了解课程
恭喜解决一个难题,获得1积分~
来为老师/同学的回答评分吧
0 星