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">에 <p class="a1">을 변경 시도 할 수 있습니다 참조하십시오?