为何代码跟老师一样还是有问题啊？

<!DOCTYPE html>

<html>

<head>

<title>Document</title>

body,div，p{margin: 0;padding: 0; font-family: "Microsoft Yahei" ;}

.course{width: 220px;margin: 0 auto; background-color: #f2f4f6; border:1px solid #ececec;}

.list1{width:100%; background-color: #040a10; height: 90px;padding-top: 60px;}

.content{font-size:20px;color: #FFF;font-weight: bold;text-align: center; }

.list2{font-size:14px;border-bottom: 1px solid #d9dde1; margin: 0 15px;

padding: 10px 5px 5px 5px; line-height: 1.5em;}

.special{border-bottom: none;}

span{color: #93999f;font-size: 12px；}

</style>

</head>

<body>

<div>

<p>前端课程排列</p>

</div>

<div>

<p>HTML+CSS基础教程</p>

</div>

<div>

<p>HTML+CSS基础教程</p>

</div>

<p>HTML+CSS基础教程</p>

</div>

</body>

</html>

这里有两个问题，第一.list1{width:100%; 这里面的width不写好像也没关系啊？那为何要写呢？

第二就是为何突然出现了margin:20px，我没有给啊?

第三就是结果为何跟老师不一样

默认情况下div的宽度是100%，相对于父级 width （父级决定），所以list1不需要设置width：100%；

还有就是.

list2{font-size: 14px;}

span{color:#93999f;font-size:12px;}

不是说.list2的权重比span高吗，应该会采用14px的大小，12px应该不起作用才对？？我不理解老师给list2 14px大小是为何？

OlafChou 2017-05-17

源自：盒子模型 4-6 案例应用

108

收起

6回答

小于飞飞回答被采纳获得+3积分 2017-05-18 18:08:03

你好，

list1{width:100%; 可以不设置，从分析到写代码一步不实现，当然当代码多了，有能会遗漏，所以建议写上，不写也可以。
html标签有相应的默认样式，这个是p 标签的默认样式，可以在开始去掉，代码中虽然有，但是 body,div，p{} 选择器之间的逗号在英文下输入，否则不起作用。
.list2 是在父元素上，span 如不设置 font-size ,它会从父元素哪继承 font-size:14 px , 注意继承的优先级低，当 span 设置 font-size:12px , 它的优先级高于继承的样式，所以显示12 px.
你看的还是 14 px , 因为span{color:#93999f;font-size:12px;} 中的 font-size:12px; 的分号是中文状态，请在英文状态下输入分号。

希望对你有帮助，祝学习愉快。如解决你的疑惑，欢迎采纳呦。

收起回答

OlafChou 提问者 #1

我放图回复了，求解答

2017-05-18 22:26:23

慕粉2120116609 2017-06-14 14:10:03

你可以把我的代码复制上去试下外表看起来基本上差不多

收起回答

慕粉2120116609 2017-06-14 14:03:13

<!DOCTYPE html>

<html>

<head>

<title>display属性</title>

body,div,p{margin:0;padding:0;}

.p0{background-color:#E8E8E8;height:310px;width:200px;margin:0 auto;}

.p1{background-color:#000000;height:70px;padding-top:50px;}

.duanluo1{color:white;font-weight:bold;text-align:center;}

.p2{padding:10px 20px 10px 10px;}

.p3{padding:2px 20px 10px 10px;}

.p4{padding:2px 20px 10px 10px;}

span{color:#C0C0C0;font-size:5px;}

p{font-family:"微软雅黑";}

</style>

</head>

<body>

<p class="duanluo1">前端课程排列<p>

</div>

<p>HTML+CSS基础课程</p>

<hr />

</div>

<p>HTML+CSS基础课程</p>

<hr />

</div>

<p>HTML+CSS基础课程</p>

</div>

</body>

</html>

收起回答

慕粉2120116609 2017-06-14 14:02:33

我这个在老师哪里看了一遍然后自己动手做的可能和老师的有差别但是希望对你有用

收起回答

提问者 OlafChou 2017-05-18 22:25:05

老师不对啊，不是说class的优先级高于标签选择器吗？ .list2的权值高于span啊，为何反而span管用

收起回答

小于飞飞 #1

如果 .list2 设置在 span 标签上，同一个元素设置多个样式时，设置根据上图，是应该是 .list2 的样式。但是代码中 .list2 设置在 span 的父元素上，span 是从父元素哪继承的 .list 中的字体大小，继承的优先级低，所以是 span 本身设置的样式优先级高。

2017-05-19 11:31:53
小于飞飞 #2

一定注意，同一个元素设置多个样式时的优先级关系呦。

2017-05-19 11:33:02
提问者 OlafChou 回复小于飞飞 #3

有时候很很难判断是否是同一个元素设置多个样式，我一直理解的是父级设置样式也算。

2017-05-19 13:02:04