不必要 Bootstrap 悬停 Class 无故添加？

Question

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

这是悬停现在的样子：

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% 确定这个问题是从 bootstrap 发生的，但如果还有其他问题，请告诉我！

Answer 1

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

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

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

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

不必要 Bootstrap 悬停 Class 无故添加？

Unnecessary Bootstrap Hover Class Being Added For No Reason?

html

css

ejs

node.js

twitter-bootstrap