왜 가상 클래스를 덮어 쓰는 것이 표시됩니까?

Question

나는 "X"로 표시 사업부를 (창 닫는 데 사용) :

.x { 
    display: none !important; 
    position: absolute !important; 
left:0; 
top:0; 
    transition: transform .25s ease-in-out; 
    z-index:999; 
} 

.x:before { 
    content: ""; 
    position: absolute; 
    //Here, I've also tried display:none !important; 
    left: 48%; 
    margin-left:-495px; 
    right: 0; 
    top: 115px; 
    bottom: 0; 
    width: 32px; 
    height: 0; 
    border-top: 3px solid black; 
    transform: rotate(45deg); 
    transform-origin: center; 
    z-index:999; 
} 
.x:after { 
    content: ""; 
    position: absolute; 
    //Here, I've also tried display:none !important; 
    left: 48%; 
    margin-left:-495px; 
    right: 0; 
    top: 115px; 
    bottom: 0; 
    width: 32px; 
    height: 0; 
    border-top: 3px solid black; 
    transform: rotate(-45deg); 
    transform-origin: center; 
    z-index:999; 
} 

하는이 사업부는 안 다음

<div class="alertwrapper" style="display:inline-block;"> 
<div class="obj"></div> 
<div class="x"></div> //<-----ELEMENT IN QUESTION 
</div> 

이 요소의 CSS 속성입니다을 다른 요소가되는 시점에서, 그것은 나타납니다, 클릭 할 때까지 다음 코드에 의해 정의 된대로 표시 :

<script type="text/javascript"> 
$(document).ready(function() { 
$('body').on('click', '.ActiveQuestionCycler', function() { 
      $("div.x").fadeIn(300).delay(1500); 
      $("div.obj").fadeIn(300).delay(1500); 
    }); 
}); 
</script> 

페이지가로드, 그러나, DIV "X"표시, .ActiveQuestionCycler이 (가) 클릭하기 전에 (디스플레이가 none으로 설정되어 있지 않습니다.) 이것은 pseudo-class before 및 after과 관련이 있다고 생각하지만 이유를 알 수 없습니다.

( .ActiveQuestionCycler을 클릭하면 div.obj는 페이드 않습니다.) 소스에 오류 알림이 없습니다

.

Answer 1

이 댓글 /// STYLE SETTINGS FOR THE QUESTION CONTAINER AND CLOSE "X" BUTTON on line 109은 유효하지 않습니다. 로 변경 :

/* STYLE SETTINGS FOR THE QUESTION CONTAINER AND CLOSE "X" BUTTON */

그것은 작동합니다. // comment는 대부분의 프로그래밍 언어에 대한 정상

.x { 
    display: none; 
    /* your other styles */ 
} 

반면, 일반 CSS는 그것을 허용하지 않습니다 및 CSS 의견이 /* comment */