无缘无故添加了不必要的 Bootstrap Hover 类？

问题描述

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

这是现在悬停的方式：

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

这是我的代码：

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

解决方法

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

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

{{1}}

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

ejs html twitter-bootstrap