#margin > p 是不错错了，正确是不是 #margin p？

Question

错误写法 #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>

Answer 1

松一老贼 2019-10-25 16:34:18

是啊，我当时也懵了一下，差点颠覆了我对BFC的认识：

老师的这个例子确实没举好，好的例子应该是：

1. 第二个p应该写一个单独的margin样式，并且margin值应该稍大，视觉上更容易和其他的p区分

2. 后边对比的p最好写2个或者2个以上作为对比

   这样就可以很明显的看出在div创建了bfc后，第二个p的外边距增大了许多

• 快乐动起来呀 #1

  收到反馈，后续会注意，多谢

Answer 2

weixin_慕雪1363253 2019-08-19 22:44:19

确实是控制不了第二个p了，所以演示的结果里2才没有背景颜色。你说的没错，题主要是想更直观的看效果，可以单独给p2加背景颜色和margin

Answer 3

快乐动起来呀 2019-06-17 23:19:19

为什么控制不了呢？

Answer 4

快乐动起来呀 2019-06-16 22:36:11

#margin > p 表示是 id 为margin 元素的相邻子节点，没有 > 表示子节点都可以，同学去复习下 css 的基础吧

• 提问者 年轻人丶 #1

  我指的，不是这个。
  我说的是教学示例，div 作为 p 父标签后，#margin > p，已经控制不了 p 了，所以教学示例 #margin > p 是否应该换成 #margin  p 更合理一些

• 快乐动起来呀 回复 提问者 年轻人丶 #2

  为什么控制不了呢？

• 提问者 年轻人丶 回复 快乐动起来呀 #3

  我已经在重新编辑问题，并放上了说明截图，老师看下对不对？

点开查看后面2条评论