为什么设置 div class font-size 没有设置 p 元素的字体大小？

Question

这是我的 html 文件。我想更改 div 中所有 p 元素的字体大小。所以我更改了包含所有段落的 div 的字体大小，但它不起作用。为什么？

 <div class="footersection__left--address">
         <p>2</p>
         <p>Melano Park,</p>
         <p>CA</p>
         <p>USA</p>
 </div>

这是我的 SCSS 文件-

.footersection {
    background-color: #FFF;
    padding: 6rem;

    &__left{
        font-size: 1.5rem;

        &--address{
            font-size: 5rem;
            color: aqua;
        }
    }
}

Answer 1

从这个SCSS生成的CSS:

.footersection {
    background-color: #FFF;
    padding: 6rem;

    &__left{
        font-size: 1.5rem;

        &--address{
            font-size: 5rem;
            color: aqua;
        }
    }
}

这是CSS:

.footersection {
  background-color: #FFF;
  padding: 6rem;
}
.footersection__left {
  font-size: 1.5rem;
}
.footersection__left--address {
  font-size: 5rem;
  color: aqua;
}

如您所见，p 采用最后一个选择器的字体大小 .footersection__left--address。

看看这个CodePen。

Answer 2

正如@Ale_info 所指出的，您编译的CSS 意味着您的p 标签将从.footersection__left--address 继承font-size: 5rem。或者您在样式表中设置了所有 p 标签的字体大小。

我也想借此机会告诉你，你用错了BEM。

-- 定义了一个修饰符 class，它应该修改一个现有的元素 class，因此应该附加到它。您正在单独使用修饰符，而没有元素的实际基本样式。

这是糟糕的 BEM：

<div class="footersection">
  <div class="footersection__left--address"></div>
</div>

这是很好的 BEM：

<div class="footersection">
  <div class="footersection__left footersection__left--address"></div>
</div>

为什么设置 div class font-size 没有设置 p 元素的字体大小？

Why setting div class font-size doesn't set the p element font size?

html

css

sass

bem