Css 如何调试诸如hover之类的伪元素？

我一直在尝试我能找到的一切。什么都没用。我想做的是非常简单和容易。我只想在光标悬停时高亮显示/更改按钮的背景色，但不管我怎么做，鼠标悬停效果都不起作用。我将尝试通过提供自定义CSS和HTML来重现环境。我也在本地托管Bootstrap和jQuery，而不是CDN，它们都包含在index.html中

index.html

    <section class="sectionscreen" id="splash">
    <div class="col-md-12">
    <div class="row">
    <div class="form">
    <div class="center-text-screen">
    <a id="loginBtnHover" href="login.html" class="btn-link-screen btn" data-translate="log_in">Login</a>
    </div>
    </div>
    </div>
</div>
</section>

这不起作用：

.btn-link-screen:hover{
 background-color:gold !important
}

仅在计算机未连接到internet时工作，否则不工作

.center-text-screen .btn-link-screen:hover{
     background-color:gold !important;//works when not connected to internet
}

或

不起作用

#splash .center-text-screen .btn-link-screen:hover

#splash .btn-link-screen:hover

#splash a:hover

不起作用

#splash .center-text-screen .btn-link-screen:hover

#splash .btn-link-screen:hover

#splash a:hover

不起作用

#splash .center-text-screen .btn-link-screen:hover

#splash .btn-link-screen:hover

#splash a:hover

---

我做错了什么？我如何调试它？

好吧，不知为什么，在某个地方，您的样式正在被级联中的其他样式覆盖，这意味着您的CSS在您试图重写的规则之前被读取。这就是正在发生的一切

首先要检查的是：确保样式表在HTML中的引导后定位

如果不是这样，您使用的是哪个版本的引导

另外，我注意到你有一个id——loginBtnHover——你试过了吗？该ID为您提供了很多针对该元素的特定性。ID将取代类规则

---

调试悬停状态在每个现代浏览器中都可用。我可以试着描述一下按钮的位置，但我认为在上面找到YouTube作为您选择的浏览器会更快/更容易。但是你可以做到这一点——在这个菜单中有选项可以切换：悬停、：聚焦、：活动等等，这非常有用。

Dude！你解决了我的问题。css位于自定义css之后。我把我的自定义样式表后，引导和繁荣解决！谢谢你的支持！令人惊叹的我已经做过几次了。如果你发现自己需要！重要的是，请仔细检查CSS文件顺序。