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/>要素をネストすることはできません。段落には、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ではありません別の<p>タグ内の<p>タグ。

https://stackoverflow.com/a/12015809/7024837

を参照してください。たぶん、あなたは<span class="a1">へ​​を変更してみてください？