为什么可见性始终设置为可见虽然在CSS中是隐藏的？

Question

我正在使用ShadowBox来显示媒体。它有一些属性 showOverlay ，我设置为false，因为不需要它。 问题是背景不可访问，就像ShadowBox是模态对话框一样，尽管CSS中的可见性被设置为隐藏。 在Chrome和Mozilla中，它将更改为可见并且是模态的。如果我再次将其更改为隐藏，则会手动运行。

但是为什么在Chrome和Mozilla浏览器的源页面/ css中始终将其设置为可见

以下是我的 ShadowBox的CSS ：

#sb-container {
    position: fixed;
    margin: 0;
    padding: 0;
    top: 0;
    left: 0;
    z-index: 999;
    text-align: left;
    visibility: hidden;
    display: block;
}

#sb-overlay {
    position: relative;
    height: 100%;
    width: 100%;
    visibility:hidden;
}

#sb-wrapper {
    position: absolute;
    visibility: hidden;
    width: 100px;
}

Chrome和Mozilla 是什么！在Explorer中它有效！

Answer 1

内联样式（element.style上的样式）比样式表中定义的CSS样式具有更大的“优先级”。

你能做什么：

• 如果可能的话，实际上避免使用内联样式是一个很好的建议。充分利用元素的样式，最不具体。这样，他们以后很容易被覆盖。

  请注意，通过JS（someElement.style.someStyleHere）更改样式也会计为内联样式。

• 如果要动态更改样式，最好在CSS类中定义样式，并使用JS在目标元素上动态添加或删除这些类。

  如果您熟悉jQuery，addClass和removeClass是我引用的函数。当然，你可以提出自己的函数来解析元素的className，并添加或删除所说的类。

• 如果避免使用内联样式（由于您使用的某种框架就是这样做），您可以通过在样式表中定义的样式上放置!important来覆盖内联样式。它有点鲁莽，通常用作推翻内联样式的最后手段。

Answer 2

根据您的屏幕截图，visiblity: visible似乎在元素的style属性中设置为style。 style属性始终覆盖任何样式表中的内容。

Answer 3

尝试使用visibility: hidden !important;

Answer 4

这是CSS中一个非常简单而有趣的概念，名为CSS Specificity

它向浏览器定义了在覆盖规则的情况下应用哪个CSS规则。

在您的情况下，您已将内联CSS样式应用于html元素。由于它具有最高优先级，因此无论您在外部.css文件中写入什么都将被忽略。

要避免这种情况，请从html代码中删除所有内联css，并尝试将它们合并到您拥有的外部css文件中。或者正如许多人已经建议的那样，你可以使用“！important”来获得最大的优势。

希望这能解决问题。