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

Question

例如：

我有一个li的子元素：

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

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

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

这不起作用，所以我尝试了另一种方法。我将类“heading”添加到p元素中。然后我写了我试图将li.p应用到类#heading的相同样式。

它仍然不起作用。这是为什么？

Answer 1

您正在编写CSS，好像p是一个类（li.p将样式元素<li class="p">），所以删除全句，它应该< / p>

li > p {
  // Style here
}

Answer 2

P没有一个类它是一个标记，所以不需要dot p而p是li的孩子，所以只是在li和p之间加一个空格。像这样更改你的代码。

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

Answer 3

以这种方式使用

php5-curl : Depends: php5-common (= 5.5.9+dfsg-1ubuntu4.14) but 5.5.12+dfsg-2ubuntu4.6 is to be installed

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

申请css li.p效果

class