无缘无故添加了不必要的引导悬停类？答案

【问题标题】：Unnecessary Bootstrap Hover Class Being Added For No Reason?无缘无故添加了不必要的引导悬停类？
【发布时间】：2025-12-13 02:55:02
【问题描述】：

我正在尝试创建一个非常简单的导航栏。我已将引导程序添加到我的项目以及我自己的样式表中。我的页面上只包含了 1 个引导类（我认为）。我添加了自定义悬停效果，但由于某种原因，我得到了悬停动画以及另一个播放颜色变化和其他内容的动画。

现在悬停是这样的：

No Hover

Hover

我希望文本在悬停时保持白色，并且没有黑色下划线。

这是我的代码：

HTML/EJS

<head>
  <meta charset="utf-8">
  <title>Madhose</title>
  <meta charset="utf-8">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <link rel="stylesheet" href="/css/styles.css">
   <nav>
                <a href="#" class="logo">Madhose</a>
                <ul>
                    <li><a href="/">Home</a></li>
                    <li><a href="#">Poems</a></li>
                    <li><a href="#recipes">Recipes</a></li>
                    <li><a href="/posts">Posts</a></li>
                </ul>
            </nav>

  <body>
    <div class="container-fluid">

<h1>Posts</h1>
<p><%= postText %></p>
<% posts.forEach(function(post){ %>
  <h1><%= post.title.substring(0,200) %></h1>
  <p><%= post.content.substring(0,200) %>...
  <a href="/posts/ <%= post.title %>">Read More</a></p>
<%});  %>

</div>
</div>
</body>
</html>

CSS

@import url('https://fonts.googleapis.com/css2?family=Oswald&display=swap');
.container-fluid {
    padding-top: 70px;
    padding-bottom: 70px;
}
.navbar {
    padding-top: 15px;
    padding-bottom: 15px;
    border: 0;
    border-radius: 0;
    margin-bottom: 0;
    font-size: 12px;
    letter-spacing: 5px;
}

.footer-padding {
    padding-bottom: 60px;
}

.footer p {
    margin-top: 25px;
    font-size: 12px;
  color: #fff;
}
nav {
    width: 100%;
    position: fixed;
    z-index: 2;
    display: flex;
    align-items: center;
    padding: 0;
    margin-top: -7px;
}

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    position: fixed;
    width: 100%;
    background-color: rgb(0, 120, 255);
    height: auto;
    display: flex;
    justify-content: flex-end;
}

li a {
    color: rgb(235, 222, 222);
    text-align: center;
    padding: 16px;
    text-decoration: none;
    font-size: 19px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    display: block;
}

li a::after {
    content: '';
    display: block;
    width: 0;
    height: 2px;
    background-color: rgb(235, 222, 222);
    transition: width .3s;
}

li a:hover::after {
    width: 100%;
    transition: width .3s;
    
}

.logo {
    color: white;
    text-align: center;
    padding: 16px;
    text-decoration: none;
    font-size: 25px;
    font-family: 'Oswald';
    display: flex;
    z-index: 3;
}
.logo:hover{
    color:white;
    text-decoration: none;
}
h1{
    font-family: 'Oswald';
}

我几乎 100% 确定这个问题是从引导程序发生的，但如果还有其他问题，请告诉我！

【问题讨论】：

nav 最有可能在引导程序中用于菜单导航，除非您使用自定义构建，否则引导程序会应用默认主题。你的选择是：用你自己的 CSS 覆盖他们的样式，得到一个精简的无主题版本的 Bootstrap（你使用的是一个旧版本，我相信它仍然有这个选项）或者废弃 Bootstrap 并使用一个专注于核心元素的准系统框架，但是不应用样式。
@imvain2 我认为我的导航栏样式覆盖了引导程序？

标签： html css node.js twitter-bootstrap ejs

【解决方案1】：

只有在正确编写级联时，您的样式才会覆盖引导程序。如果您在 chrome 中使用 devtools 之类的工具并检查元素的 CSS，您会看到针对元素的 CSS 有多个级别，但并非所有级别都被主动应用，因为有些被覆盖了。如果您的样式的级联值不等于 Bootstrap 的值，则您的样式可能不会优先。

因此，如果您想更一致地覆盖这些值，请使用 psuedo-namesapacing：

nav#topNavigation ul li a {}
nav#topNavigation ul li a:hover {}

通过向元素添加唯一 ID，我们增加了此选择器的级联值，并且应用了我们的 css 而不是 Bootstrap 的。

【讨论】：

成功了！谢谢！！
没问题！我很高兴它有帮助:)