Javascript bootstrap阻塞jquery函数

我需要使用jQuery中的slideDown函数，它要求将要设置动画的内容放在class“.hide”下

对于.hide，我在自定义css中有以下内容：

.hide {
    display: none;
}

它与引导css冲突，因为它包含：

.hide {
    display: none !important;
}

因此，当我链接这两个样式表时，slideDown不起作用，然后我在两个文件中尝试了不同的.hide变体，最后从自定义css文件中删除.hide完全起作用

因此，我的问题是，当Bootstrap“.hide”和custom css“.hide”中定义的属性完全相同时，为什么自定义css中的.hide会影响结果，除了有“！important”之外（我想，如果我错了，请更正），这意味着自定义选择器将被优先考虑

---

我正在尝试使用codepen共享我的代码的工作版本，但我不知道为什么我的代码仍然不能在codepen上运行：

代码！重要信息始终非常强大。如果使用

display:block！重要的之后

最简单的方法是不使用引导所针对的“hide”或“hidden”类。只需将类更改为“hideit”或类似于此更新的小提琴：
谢谢@Simon Kraus的帮助，但我仍然找不到问题的答案，为什么使用.hide会在两个隐藏的定义相同，加上引导隐藏的定义相同时产生问题！重要提示：指示使用自定义css的隐藏。如果有，请在css文件第1行中隐藏，并显示：无；和。隐藏在第10行，显示：块；第一个将被覆盖。如果你用！重要的是，它有更大的重量。您可以在后面的一行中用另一个重要内容覆盖它。这同样适用于不同的css文件。它将被分层覆盖。jquery在其show（）和hide（）中使用内联样式。这种内联样式的权重与样式表中的类类似，但与样式表中的类相比，它的权重更小！重要宣言。希望这在某种程度上是可以理解的：作为前端技术的新手，这让我了解了一些新事物，在我探索css层次结构的过程中。。谢谢@西蒙·克劳斯。。