SCSS Nesting Issue

Question

Я пытаюсь создать H3 и тэг p внутри div.

У меня есть этот блок кода (который не стилизации р тег) -

.marketing-single-page-titles{ 
h3 { 
    margin: 0; 
    padding: 0; 
p { 
    margin: 0; 
    padding: 0; 
    position: relative; 
    top: -5px; 
    color: $marketing-blue; 
    font-weight: bold; 
}}} 

И этот блок (т.е. стилизации р тег) -

.marketing-single-page-titles p { 
    margin: 0; 
    padding: 0; 
    position: relative; 
    top: -5px; 
    color: $marketing-blue; 
    font-weight: bold; 
} 

Есть причина стили игнорируются для тега p в первом блоке?

Answer 1

Форматирование кода правильно покажет, что p должны быть вложены в h3

Нижеуказанных отображает код отформатированного правильно, выделяя проблему:

.marketing-single-page-titles { 
    h3 { 
    margin: 0; 
    padding: 0; 

    p { 
     margin: 0; 
     padding: 0; 
     position: relative; 
     top: -5px; 
     color: $marketing-blue; 
     font-weight: bold; 
    } 
    } 
} 

Как это должно быть (обратите внимание на положение закрывающих фигурных скобок):

.marketing-single-page-titles { 
    h3 { 
    margin: 0; 
    padding: 0; 
    } 

    p { 
    margin: 0; 
    padding: 0; 
    position: relative; 
    top: -5px; 
    color: $marketing-blue; 
    font-weight: bold; 
    } 
} 

Answer 2

Первый блок будет работать, только если p находится внутри h3 тег; что-то вроде:

<h3>My nice title with a <p> paragrahp inside</p></h3> 

Вашего первоначального правила озабоченностей пункта переводится

.marketing-одностраничного-заголовки h3 р {.....

Вот почему.