Почему установка размера шрифта класса div не устанавливает размер шрифта элемента p?

Вот мой html-файл. Я хочу изменить размер шрифта всех элементов p в div. Поэтому я меняю размер шрифта 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;
        }
    }
}

html css sass bem
person Y.R    schedule 01.02.2020    source источник
comment
Я бы предпочел, чтобы вы не вкладывали CSS таким образом. Если вы хотите получить доступ к селектору p в классе div, вы можете сделать что-то вроде этого: jsfiddle.net /L4f0o6av/1 Кроме того, вы можете проверить эту статью о вложенности: w3schools.com/ css/css_combinators.asp   -  person Jack Doe    schedule 01.02.2020
comment
В отсутствие какого-либо другого CSS p действительно наследует размер шрифта и цвет div, поэтому, очевидно, у вас есть и другие CSS, которые устанавливают p.   -  person Mr Lister    schedule 01.02.2020
comment
Или это может быть проблема с кэшированием; браузер может просматривать более старую версию таблицы стилей. Очистите кеш и перезагрузите.   -  person Mr Lister    schedule 01.02.2020
comment
@MrLister, ты прав. Я только что проверил полученный код CSS, и да, он должен работать так, как определил OP. Поэтому я удалил свой ответ, потому что был неправ. Спасибо, что указали на это.   -  person pixelquadrat    schedule 01.02.2020

Ответы (2)


arrow_upward
2
arrow_downward

CSS, сгенерированный из этого SCSS:

.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.

person Alessandro_russo    schedule 08.02.2020

arrow_upward
1
arrow_downward

Как указал @Ale_info, ваш скомпилированный CSS означает, что ваши теги p будут наследовать font-size: 5rem от .footersection__left--address. Или у вас есть что-то еще в ваших таблицах стилей, устанавливающее размер шрифта для всех тегов p.

Я также хотел воспользоваться возможностью, чтобы сказать вам, что вы неправильно используете БЭМ.

-- определяет класс Modifier, который должен модифицировать существующий класс Element, поэтому должен быть добавлен к нему. Вы используете модификатор сам по себе без фактических базовых стилей для элемента.

Это плохой БЭМ:

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

Это хороший БЭМ:

<div class="footersection">
  <div class="footersection__left footersection__left--address"></div>
</div>
person codeth    schedule 08.02.2020
comment
Спасибо, что указали на проблему с моим BEM. Я все еще в замешательстве и не знаю, как правильно использовать БЭМ. Не подскажете, что почитать на эту тему? - person Y.R; 03.03.2020
comment
@Y.R Много ресурсов, просмотрите это и посмотрите, поможет ли это вашему пониманию css-tricks .com/bem-101 - person codeth; 08.03.2020