无法弄清楚为什么 <p> 和 <h3> 的样式像超链接

Question

我是前端新手，这将是我的第一个网站。 我正在使用 HTML、CSS、Bootstrap 和 Flask。

我遇到的问题是，当下面的代码是纯文本时，它的样式就像一个链接。它是蓝色的，当我将鼠标悬停在它上面时，它会变成蓝色并带有下划线。

<div class="container col-md-6 col-lg-5">
    <hr>
    <p class="lead" id="repo-title">Welcome to the repository of my publications.</p>
    <p id="repo-intro">Introduction to repository. This is the sum of my work, from many different projects. It is listed in chronological order. Use the navigation on the left-side to filter through the repository by subject, project or publication format.</p>
</div> 

我不相信我使用过任何可能导致这种情况的 Bootstrap 类。 当我在 Firefox 中使用开发者模式时，我注意到它继承了以下样式：

a:hover {
    color: #0056b3;
}

来自 _reboot.scss:13 ，它似乎是一个引导文件。虽然我没有注意到任何可能导致元素被下划线或光标变为小手的东西。

我已尝试使用 CSS 样式来纠正此问题，例如：

#repo-title, #repo-intro
{
    color:black;
}

#repo-title:hover, #repo-intro:hover
{
    text-decoration:none;
}

这改变了字体颜色，但没有删除下划线，光标悬停在文本上时也没有改变。

这是我的自定义 CSS 样式表，以防我在不知不觉中导致此问题：

body
{
    margin:0;
}  

#headline 
{
    font-size: 64px;
    color:white;
}
#headline:link, #headline:visited
{
    text-decoration: none;
}

#headline:hover, #headline:active
{
    color:white;
}

#top-banner
{
    margin-bottom: 0px;
    padding-bottom: 20px;
}

/*NAVVY*/

.navvy
{
    text-align: center;
    padding: 30px;
    overflow: hidden;
}

.navvy li
{
    display: inline;
}

.navvy li a
{
    text-decoration: none;
    font-size: 16px;
    color: rgb(0,123,255);
    padding: 10px;
    border-radius: 10px;
    font-weight: 200;
}

.navvy-link a:hover
{
    color: rgba(0, 0, 0, 0.822);
    text-decoration:none;
}

.navvy li a.active
{
    background-color:rgb(0,123,255);
    color:white;
}

.navvy .icon {
    display: none;
  }

  @media screen and (max-width: 768px) {
    .navvy-link, .active {display: none;}
    .navvy a.icon {
      float: right;
      display: block;
      font-size: 40px;
    }
    .navvy li a{width: 90%;}
  }

  @media screen and (max-width: 768px) {
    .navvy.responsive {position: relative;}
    .navvy.responsive .icon 
    {
        padding-top: 11px;
        padding-right: 4px;
        position: absolute;
        right: 0;
        top: 0;
    }
    .navvy.responsive a {
      float: none;
      display: grid;
      justify-content: center;
      padding: 25px;
    }

    .navvy.responsive li
    {
        display: grid;
        justify-content: center;
    }
  }
hr
{
    margin-top: 0;
    margin-bottom: 30px;
}
/*HOME*/
img#bust
{
    width:75%;
    height: auto;
}



/*REPOSITORY*/


#main-content
{
    display:flex;
    padding:2rem;
}

#repo-nav
{
    order:1;
}

#repo-cards
{
    flex:1;
    order:2;
}



/*EVENTS*/
.container.news
{
   display: grid;
   justify-content:center;
}
.news
{
   justify-self:center;
}

提前致谢。

Answer 1

1. 使用 submlime text 或 webstorm 之类的 ide 来检查 取消关闭标签和代码错误，可能你没有使用正确的形式 标签或丢失的地方。

2. 使用简单的 html 表单创建新页面，以检查所有页面是否出现问题

3. 在浏览器中使用 ctrl+u 来检查错误（缺少的标签和错误以红色文本显示）

4. 禁用所有浏览器扩展并使用隐身模式

5. 对于覆盖引导样式代码，您可以使用 !important。

例如：

#repo-title:hover, #repo-intro:hover
{
    text-decoration:none !important;
}