为什么样式没有应用到这个例子中的子元素？

Question

例如：

我有一个li的子元素：

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

我想将以下样式应用于 p。我尝试使用以下 CSS 代码来执行此操作。

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

这个不行，我试试别的方法。我将 class "heading" 添加到 p 元素。然后，我将尝试应用于 li.p 的相同样式写入 class #heading。

还是不行。这是为什么？

Answer 1

您正在编写 CSS，就好像 p 是 class（li.p 会为 <li class="p"> 的元素设置样式），因此删除full-stop 应该是

li > p {
  // Style here
}

Answer 2

P 没有 class 它是一个标签所以不需要 dot 和 p 而 p 是 child 的 li ，所以只需在 li 和 p 之间放一个 space。像这样更改您的代码。

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

Why is style not being applied to the child elements in this example?