无法弄清楚为什么<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. 使用ide(如子窗体文本或webstorm(进行检查解开标记和代码错误，可能您没有使用正确形式的标签或某处丢失。

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

3. 在浏览器中使用ctrl+u检查错误(丢失标签和错误显示为红色文本(

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

5. 用于可以使用的重写引导程序样式代码！重要的

例如：

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