css - 为什么我的伪类覆盖显示 :none?

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 有关，但我不明白为什么。

(div.obj 在点击 .ActiveQuestionCycler 时会淡入。)

源中没有错误警报。

Answer 1

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

/* 问题容器和关闭“X”按钮的样式设置 */

它应该可以工作。请记住将 display: none; 放入 .x

所以它看起来像:

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

虽然 //comment 对于大多数编程语言来说是正常的，但常规的 css 不接受它并且 css 注释像这样 /* comment */