CSS选择器:另一个类中的类不起作用

Question

我读了以这种方式写下另一堂课的某个类的某个类：.class1 .class2 {style}。但是我发现它不起作用。

例如：

<style>
h1 p {
    background-color: yellow;
}
.a1 .a2{
     background-color: green;
}
</style>
<h1><p>Welcome to My Homepage</p></h1>
 <p class="a1">
   <p class="a2"> My name is Donald  </p> 
   <p class="a3"> I live in Duckburg.</p>
 </p>

您可以看到，以下内容应该是绿色的。但实际上不是。

<p class="a1"><p class="a2"> My name is Mike  </p> </p>

我在这里错过了什么吗？

Answer 1

您不能嵌套<p/>元素。段落只能包含措辞内容。

将外部段落更改为<div/>，并且样式将正确应用：

h1 p {
  background-color: yellow;
}
.a1 .a2 {
  background-color: green;
}

<h1>
  <p>Welcome to My Homepage</p>
</h1>
<div class="a1">
  <p class="a2"> My name is Donald </p>
  <p class="a3"> I live in Duckburg.</p>
</div>

Answer 2

这不是CSS的问题，而是HTML：您将<p>标签嵌套在另一个<p>标签的内部。

请参阅https://stackoverflow.com/a/12015809/7024837

也许您可以尝试将<p class="a1">更改为<span class="a1">？