为什么我的伪类覆盖了 display:none？

Question

我有一个显示为 "X" 的 div（用于关闭 window）：

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

然而，当页面加载时，div "x" 在单击 .ActiveQuestionCycler 之前是可见的。（显示未设置为 none。）我认为这与伪类 before 和 after 覆盖有关，但我不明白为什么.

（div.obj 会在单击 .ActiveQuestionCycler 时淡入。）

源中没有错误警报。

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

为什么我的伪类覆盖了 display:none？

Why are my pseudo-classes overriding display:none?

css

pseudo-class

为什么我的伪 类 覆盖了 display:none？

Why are my pseudo-classes overriding display:none?

css

pseudo-class

为什么我的伪类覆盖了 display:none？