이 예상대로 작동하지

Question

I가 다음과 같은 CSS :

#clickto { 
    color: white; 
    text-shadow: 2px 2px 2px Darkblue; 
} 

#verdescheading:hover { 
    border-bottom: 1px solid; 
} 


    #verdescheading :before { 
     content: " >"; 
    } 

    #verdescheading :after { 
     content: " <"; 
    } 

    #verdescheading .clicked:before { 
     content: "< "; 
    } 

    #verdescheading .clicked:after { 
     content: "> "; 
    } 

다음과 같은 HTML (이 불을 지르고에서 직접 붙여 &를 잘라, 그럴 수는 정확) :

<h1 id="verdescheading" class=""> 
Important notice 
<span id="clickto">(Click to expand)</span> 
</h1> 

이벤트의 제목 부분을 클릭하면 'verdescheading'클래스가 'clicked'로 설정됩니다. Firebug는 모든 것이 제대로 설정되어 있음을 보여줍니다. 그러나, 내가 무엇 페이지에 보는 것은 약간 다릅니다.

먼저 스타일 시트별로 설정된> 및 < 기호가 id verdesc 인 h1이 아니라 id가 'clickto'인 스팬 즉 직계 하위로 표시됩니다. Firebug는 '클릭 된'수업이 자녀가 아닌 부모에게 설정되었음을 분명히 보여줍니다.

다른 점은 기호가 변경되지 않는다는 것입니다. 즉, .clicked : before 및 .clicked : after가 아니라 before와 : after가 항상 규칙입니다.

Answer 1

#verdescheading.clicked:before { 
    content: "< "; 
} 

#verdescheading.clicked:after { 
    content: "> "; 
} 

id와 클래스가 같은 요소에 있고 자식 요소가 아니기 때문에 기호가 변경되지 않습니다. 공백이 없습니다.

다른 사람도 간격 문제를 해결되었습니다

#verdescheading:before { 
    content: " >"; 
} 

#verdescheading:after { 
    content: " <"; 
} 

이 bfavaretto