为什么样式未应用于此示例中的子元素

Question

例如：

我有一个 li 的子元素：

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

我想将以下样式应用于 p。我尝试使用以下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 效果 li class

<li class="p">