이 CSS가 노란색 단락을 생성하는 이유

Question

 <style> 
    p { 
     color:   red; 
    } 
    .warm { 
     color:   green; 
    } 
    p.warm { 
     color:   orange; 
    } 
    p.cute { 
     color:   yellow; 
    } 
    p.boring { 
     color:   blue; 
    } 
    } 

    </style> 

<p class="warm cute boring"> 

코드에 파란색 줄이 예상됩니다. 이유를 설명해 주시겠습니까?

Answer 1

CSS에서 규칙을 중첩 할 수 없기 때문에 유효한 CSS는 아닙니다.

p.boring 규칙은 무시됩니다.

Answer 2

p.cute 규칙이 제대로 종료되지 않습니다.

p.cute { 
    color:   yellow; 

p.boring { 
    color:   blue; 
} 
} 

는

p.cute { 
    color:   yellow; 

} 
p.boring { 
    color:   blue; 
}