Question

我希望能够点击类.cancel的元素并转换为隐藏我的模态。但是，转换不会发生，因为当我使用Chrome浏览器检查页面时，opacity属性未显示，而是显示display: none !important。如果我将检查器中的CSS调整为opacity: 0（就像我想要的那样），那么转换就可以了。

我很想知道opacity被display: none !important取代的原因。相关代码的片段如下：

.hidden {
    opacity: 0;
}
.modal-edit {
    position: fixed;
    width: 600px;
    height: 500px;
    top: 100px;
    right: 0;
    bottom: 0;
    left: 340px;
    background: white;
    border: solid 2px gray;
    padding-bottom: 10px;
    overflow-y: scroll;
    /*-webkit-transition: opacity 2s;*/
    transition: opacity 1s linear;
}

我还在项目中包含了Bootstrap，以防万一：

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">

Answer 1

当您添加.hidden类时，Bootstrap css会添加一些styling：

.hidden {
  display: none !important;
  visibility: hidden !important;
}

所以这似乎与你的不透明度规范无关。尝试使用不同的类选择器作为不透明度

为什么“不透明度：0”被解释为“显示：无！重要”？

1 个答案: