为什么我的伪级覆盖显示:无

Question

我有一个以" x"（用于关闭窗口）的div：

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

以下是此元素的CSS属性：

.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，此时应显示以下代码定义：

。

<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>

但是，当页面加载时，在单击.ActiveQuestionCycler之前可见DIV" X"。（显示并未设置为没有。）我认为这与伪级before和after覆盖了这一点有关，但我不知道为什么。

（单击.ActiveQuestionCycler时，div.obj确实会淡入。）

源中没有错误警报。

Answer 1

第109行上的/// STYLE SETTINGS FOR THE QUESTION CONTAINER AND CLOSE "X" BUTTON无效。将其更改为：

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

它应该起作用。切记将display: none;放入.x

因此看起来像：

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

虽然// comment在大多数编程语言中都是正常的，但常规CSS不接受它，并且CSS评论如下/* comment */