html - 'Text-decoration : none ! important' 不适用于 Bootstrap

这是我的代码笔:https://codepen.io/LastSoldi3r/pen/OmjGgR

HTML:

<html>
<head>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
<script src="https://use.fontawesome.com/1ade2ea03e.js"></script>
</head>
<body>
<ul>
  <li><a class="active" href="#home"><i class="fa fa-home" aria-hidden="true"></i> Home</a></li>
  <li><a href="#about"><i class="fa fa-info-circle" aria-hidden="true"></i> About</a></li>
  <li><a href="#portfolio"><i class="fa fa-folder-open" aria-hidden="true"></i> Portfolio</a></li>
  <li><a href="#contact"><i class="fa fa-address-book" aria-hidden="true"></i> Contact</a></li>
</ul>

<div class="container-fluid" style="margin-left: 10%; padding: 1px ;">
  <a name="home">
    <div class="row">
      <div class="col-md-12">
        <img width="100%" height="100%" class="code" src="http://cdn2.cloudpro.co.uk/sites/cloudprod7/files/java_0.jpg">
        <img class="nametag" src="http://i.imgur.com/12ZcxYW.png">
      </div>
    </div>
    </div>

<div class="container-fluid  text" style="margin-left: 10%; padding: 1px 16px;"> 
  <!--About Me-->
  <a name="about">
    <h2 align="center">About</h2><br>
    <div class="row">
      <div class="col-md-6">
        <p id="aboutMe">I earned my Associates of Science for Information Technology in 2015.  I am now working on my certification in Front End Web Development with the end goal of being a certified Full Stack Web Developer.  I am achieving this goal with the help of freeCodeCamp().</p>
        <div class="col-md-12">
          <h2 align="center">Skills</h2><br>
        </div>
        <div class="row">
    <div class="col-md-3 skills">
      <i class="fa fa-coffee"></i>
      <p>JAVA</p>
    </div>
    <div class="col-md-3 skills">
      <i class="fa fa-html5"></i>
      <p>HTML5</p>
    </div>
    <div class="col-md-3 skills">
      <i class="fa fa-css3"></i>
      <p>CSS3</p>
    </div>
    <div class="col-md-3 skills">
      <i class="fa fa-code"></i>
      <p>JAVASCRIPT</p>
    </div>
  </div>
      </div>
      <div class="col-md-6">
        <img width="50%" height="50%" src="https://scontent.fhsv1-1.fna.fbcdn.net/v/t1.0-9/15219976_10153891163957294_6687591802937802260_n.jpg?oh=dccd86082954a5d9d1764fbd53ad70dc&oe=5982B68A">
      </div>
    </div>
    <!--Portfolio-->
    <br><br>
    <a name="portfolio">
      <div class="well background">
        <h2 align="center">Portfolio</h2><br>
      </div>


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

CSS:

body {
background-color: #011f4b !important;
margin: 0;
}

ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 10%;
background-color: #b3cde0;
position: fixed;
height: 100%;
overflow: auto;
}

li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}

li a.active {
background-color: #005b96;
color: white;
}

li a:hover:not(.active) {
background-color: #6497b1;
color: white;
}

#aboutMe {
font-size: 20px;
}

.code {
position: relative;
top: 0;
left: 0;
}

.nametag {
position: absolute;
top: 35px;
left: 60px;
}

.skills {
text-align: center;
font-size: 1.7em;
width: 110%;
}

.background {
background-color: #03396c !important;
}

我知道您可以更改 bootstrap 本身中的 css 来更改这些效果。但是，我正在学习并看到我是新手，我只是使用了 Bootstrap 网站上提供的链接，而不是筛选 css。如果你看一下我的笔，你会发现将鼠标悬停在任何文本上都会使它变暗并在某些部分加下划线。

我尝试过以各种方式覆盖代码。

我最近尝试过且最常见的解决方案:

a.hover {text-decoration: none !important;}

这对我没有用，我也找不到任何其他可行的解决方案。

最佳答案

将这段简单的代码添加到您的 css 文件中:

html a:hover {
    text-decoration: none !important;
}

页面的显示方式如下:

html a:hover {
    text-decoration: none !important;
}
body {
  background-color: #011f4b !important;
  margin: 0;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 10%;
  background-color: #b3cde0;
  position: fixed;
  height: 100%;
  overflow: auto;
}

li a {
  display: block;
  color: #000;
  padding: 8px 16px;
  text-decoration: none;
}

li a.active {
  background-color: #005b96;
  color: white;
}

li a:hover:not(.active) {
  background-color: #6497b1;
  color: white;
}

#aboutMe {
  font-size: 20px;
}

.code {
  position: relative;
  top: 0;
  left: 0;
}

.nametag {
  position: absolute;
  top: 35px;
  left: 60px;
}

.skills {
  text-align: center;
  font-size: 1.7em;
  width: 110%;
}

.background {
  background-color: #03396c !important;
}

<html>
  <head>
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
    <script src="https://use.fontawesome.com/1ade2ea03e.js"></script>
  </head>
  <body>
    <ul>
      <li><a class="active" href="#home"><i class="fa fa-home" aria-hidden="true"></i> Home</a></li>
      <li><a href="#about"><i class="fa fa-info-circle" aria-hidden="true"></i> About</a></li>
      <li><a href="#portfolio"><i class="fa fa-folder-open" aria-hidden="true"></i> Portfolio</a></li>
      <li><a href="#contact"><i class="fa fa-address-book" aria-hidden="true"></i> Contact</a></li>
    </ul>
    
    <div class="container-fluid" style="margin-left: 10%; padding: 1px ;">
      <a name="home">
        <div class="row">
          <div class="col-md-12">
            <img width="100%" height="100%" class="code" src="http://cdn2.cloudpro.co.uk/sites/cloudprod7/files/java_0.jpg">
            <img class="nametag" src="http://i.imgur.com/12ZcxYW.png">
          </div>
        </div>
        </div>
        
    <div class="container-fluid  text" style="margin-left: 10%; padding: 1px 16px;"> 
      <!--About Me-->
      <a name="about">
        <h2 align="center">About</h2><br>
        <div class="row">
          <div class="col-md-6">
            <p id="aboutMe">I earned my Associates of Science for Information Technology in 2015.  I am now working on my certification in Front End Web Development with the end goal of being a certified Full Stack Web Developer.  I am achieving this goal with the help of freeCodeCamp().</p>
            <div class="col-md-12">
              <h2 align="center">Skills</h2><br>
            </div>
            <div class="row">
        <div class="col-md-3 skills">
          <i class="fa fa-coffee"></i>
          <p>JAVA</p>
        </div>
        <div class="col-md-3 skills">
          <i class="fa fa-html5"></i>
          <p>HTML5</p>
        </div>
        <div class="col-md-3 skills">
          <i class="fa fa-css3"></i>
          <p>CSS3</p>
        </div>
        <div class="col-md-3 skills">
          <i class="fa fa-code"></i>
          <p>JAVASCRIPT</p>
        </div>
      </div>
          </div>
          <div class="col-md-6">
            <img width="50%" height="50%" src="https://scontent.fhsv1-1.fna.fbcdn.net/v/t1.0-9/15219976_10153891163957294_6687591802937802260_n.jpg?oh=dccd86082954a5d9d1764fbd53ad70dc&oe=5982B68A">
          </div>
        </div>
        <!--Portfolio-->
        <br><br>
        <a name="portfolio">
          <div class="well background">
            <h2 align="center">Portfolio</h2><br>
          </div>
        
        
    </div>    
  </body>
</html>

关于html - 'Text-decoration : none ! important' 不适用于 Bootstrap ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43811394/

html - 'Text-decoration : none ! important' 不适用于 Bootstrap

上一篇：html - 将导航栏中的文本和图像居中并将导航栏放在页面顶部

下一篇：javascript - Timepicker 只显示几次