Question

我是CSS的新手，我只是想知道为什么我的按钮一直用下划线变成蓝色，即使我设置了text-decoration：none。

编辑：我添加了 - ＆gt; a：悬停和！重要。现在下划线消失了，但它仍然变成了蓝色？

以下是我尝试运行的HTML和CSS文件的片段：

 

   .container {
      max-width: 928px;
    }
    
    h1, h2, p, a {
      font-family: 'Helvetica Neue Thin', 'HelveticaNeue-Thin', 'helvetica neue', helvetica, arial, 'lucida grande', sans-serif;
    }
    
    h1 {
      font-size: 64px;
      font-weight: 100;
      margin-bottom: 20px;
    } 
    
    
    a:hover{
    	text-decoration: none;
    }
    
  a {
      font-size:18px;
      font-weight: 200;
      background-color: rgba(238,68,95,0.9);
      padding: 7px 22px 7px 22px;
      border-radius: 4px;
      color: white;
      text-decoration: none !important;
    }
    
    .main {
      height: 550px;
      padding-top: 55px;
      background: url(https://s3.amazonaws.com/codecademy-content/projects/shutterbugg/intro.jpg);
    }
    
    .main p {
      font-size: 26px;
      font-weight: 200;  
      margin-bottom: 40px;
    }
    
    .section .row {
      padding-top: 50px;
      padding-bottom: 50px;
      border-bottom: 1px solid #dbdbdb;
    }
    
    .store {
      text-align: center;
      border-bottom: 0px;
      padding-bottom:100px
    }
    
    .footer {
      border-top: 1px solid #dbdbdb;
      background-color: #f3f3f3;
      padding: 20px 0px 80px;
    }
    
    .footer ul {
      list-style-type: none;
      padding-left: 0;
    }
    
    .footer li {
      color: #999;
      font-weight: 600;
    }
    
    @media (max-width: 500px) {
      .col-md-6 img {
        padding: 50px;
        width: 100%;
      }
    }

    <!doctype html>
    <html>
      <head>
        <link rel="stylesheet" href="https://s3.amazonaws.com/codecademy-content/projects/bootstrap.min.css">
        <link rel="stylesheet" href="style.css">
      </head>
      <body>
        <!-- The main section -->
        <div class="main">
          <div class="container">
            <h1>Introducing Shutterbugg</h1>
            <p>Capture the moments that matter.</p>
            <a href="#">Download Shutterbugg</a>
          </div>
        </div>
      </body>
    </html>

Answer 1

尝试！important

它是一个css选项，用于覆盖元素

上的任何css规则

  color: white;
  text-decoration: none !important;
}

您需要在鼠标悬停时指定该元素。

a:hover{
text-decoration: none;
}

Answer 2

 <!DOCTYPE html>
 <html>
 <head>
    <title></title>
      <style type="text/css">
        h1, h2, p, a {
        font-family: 'Helvetica Neue Thin', 'HelveticaNeue-Thin', 'helvetica neue', helvetica, arial, 'lucida grande', sans-serif;
        }

        a {
          font-size:18px;
          font-weight: 200;
          background-color: rgba(238,68,95,0.9);
          padding: 7px 22px 7px 22px;
          border-radius: 4px;
          color: white;
          text-decoration: none;
        }
    </style>
 </head>
 <body>
 <div class="main">
      <div class="container">
        <h1>Introducing Shutterbugg</h1>
        <p>Capture the moments that matter.</p>
        <a href="#">Download Shutterbugg</a>
      </div>
  </div>
 </body>
 </html>

text：装饰不适用于我的链接

2 个答案: