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

您无法嵌套元素。段落只能包含phrasing content。

将外部段落更改为<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：您已将标记嵌套在另一个标记内。

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

也许您可以尝试将更改为？

css选择器：另一个类内的一个类不起作用

2 个答案: