为什么我设置了三个div，只显示两个。

具体代码<!DOCTYPE html>

<html>

<head>

<title>Document</title>

div,p{padding: 0px; margin:0px auto;}

/*div .one{width: 500px; height: 500px;background:yellow;}*/

div .two{width: 200px;height: 200px;background:green;}

div .three{width: 150px;height: 150px;background:orange;}

p{width: 100px;height: 100px;background:red;}

</style>

</head>

<body>

<p></p>

</div>

</body>

</html>

显示效果：

ZZZZZzn 2020-03-20

源自：CSS背景和列表 2-1 background-color

收起

10回答

耐得住寂寞的旺旺 2020-04-21 20:49:15

首先你就写了两个div，还有就是div .two和div .three是什么鬼？？？代码写错了

收起回答

兔力给 2020-04-17 10:53:04

div .two 中间不加空格

收起回答

weixin_慕数据1124336 2020-04-12 17:27:31

div .two和div.two的区别中间有没有空格的原因

div .two(有空格)是指div元素内class名为two的元素

div.two(无空格)是指class名为two的div元素

收起回答

向高山举目 2020-04-04 15:30:28

没看到有3个div，只有两个

收起回答

慕尼黑2537189 2020-04-01 14:52:52

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
    div,p{padding: 0px; margin:0px auto;}
    /*div .one{width: 500px; height: 500px;background:yellow;}*/
    div.two{width: 200px;height: 200px;background:green;}
    div.three{width: 150px;height: 150px;background:orange;}
    p{width: 100px;height: 100px;background:red;}
</style>
</head>
<body>
    <div class="two">
        <div class="three">
            <p></p>
        </div>
</div>
</body>
</html>

收起回答

学习plus 2020-03-22 22:52:05

选择器写错了，中间带有空行。

div【空格】.two后代选择器不存在，所以绿色不显示。

div.two和div .two概念再去复习下

收起回答

学习plus #1

类名为two的div没有显示

2020-03-22 22:53:22
ForeverLovel 回复学习plus #2

类名为two的div的样式被div .three覆盖了，因为中间没空格然后div .two也设置不了第一个div的样式，因为中间有空格

2020-03-23 14:54:11