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

【问题标题】：Why are my pseudo-classes overriding display:none?为什么我的伪类覆盖 display:none？
【发布时间】：2017-09-07 21:31:14
【问题描述】：

我有一个显示为“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 时会淡入。）

源中没有错误警报。

【问题讨论】：

Snoops，您的代码在任何地方都有工作示例吗，例如 codeply 项目、codepen 或 jsfiddle？
我会暂时做一个更简单的 JSFiddle
为什么会有这么多风格标签？我会将它们全部合并到一个样式表中
@cup_of 在我构建站点时，它可以帮助我跟踪单独的功能。（我通过反复试验学到了我所知道的关于编码的一点点，所以我没有接受过格式化“礼仪”的正式培训。）
当然，只是提出一个最佳实践，即拥有一个包含所有样式的单独链接样式表，如果需要，可以用一堆空格分隔它

标签： css pseudo-class

【解决方案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 cmets 像这样 /* comment */

【讨论】：

出色的收获！从来没有看过 - 现在完美无缺。（我很惊讶它以前完全有效。）