Почему стиль не применяется к дочерним элементам в этом примере?

Question

например:

У меня есть дочерний элемент литий:

<li class="element1"> 
    <p>Heading</p> 
    ... 
    ... 
    ... 
</li> 

Я хочу, чтобы применить следующие стили к р. Я пытаюсь сделать это, используя следующий код CSS.

li.p { 
    font-style: bold; 
    text-align: left; 
} 

Это не работает, поэтому я попробую другой метод. Я добавляю класс «заголовок» к элементам p. Затем я пишу тот же стиль, который я попытался применить к li.p к классу #heading.

Он все еще не работает. Почему это?

Answer 1

Вы пишете CSS, как если бы p класс (li.p бы стиль элементы, которые <li class="p">), поэтому удалите полную остановку, и она должна быть

li > p { 
    // Style here 
} 

Answer 2

P есть не класс, это тег так не нужен dot с p и p является дочерью li, поэтому просто положите место между li и p. Измените свой код следующим образом.

li p { 
     font-style: bold; 
     text-align: left; 
    } 

Answer 3

использовать для этого пути

li p { 
    font-style: bold; 
    text-align: left; 
} 

применить к CSS li.p эффект только литий class

<li class="p">