#margin > p 是不错错了，正确是不是 #margin p？
来源：3-5 CSS盒模型（二）
年轻人丶
2019-06-16
错误写法 #margin > p
<!-- BFC垂直方向边距重叠 -->
<section id="margin">
<style>
#margin{
background: pink;
overflow: hidden;
}
#margin > p{
margin: 5px auto 25px;
background: red;
}
</style>
<p>1</p>
<div style="overflow:hidden">
<p>2</p>
</div>
<p>3</p>
</section>
正确写法 #margin p
<!-- BFC垂直方向边距重叠 -->
<section id="margin">
<style>
#margin{
background: pink;
overflow: hidden;
}
#margin p{
margin: 5px auto 25px;
background: red;
}
</style>
<p>1</p>
<div style="overflow:hidden">
<p>2</p>
</div>
<p>3</p>
</section>
写回答
4回答
-
松一老贼
2019-10-25
是啊，我当时也懵了一下，差点颠覆了我对BFC的认识：
老师的这个例子确实没举好，好的例子应该是：
第二个p应该写一个单独的margin样式，并且margin值应该稍大，视觉上更容易和其他的p区分
后边对比的p最好写2个或者2个以上作为对比
这样就可以很明显的看出在div创建了bfc后，第二个p的外边距增大了许多
112019-10-26 -
weixin_慕雪1363253
2019-08-19
确实是控制不了第二个p了，所以演示的结果里2才没有背景颜色。你说的没错，题主要是想更直观的看效果，可以单独给p2加背景颜色和margin
00 -
快乐动起来呀
2019-06-17
为什么控制不了呢？
00 -
快乐动起来呀
2019-06-16
#margin > p 表示是 id 为margin 元素的相邻子节点，没有 > 表示子节点都可以，同学去复习下 css 的基础吧
05相似问题
