2016-07-22 32 views
0

我希望所有链接在访问时都会改变它们的颜色。我与引导工作,这是我到目前为止已经试过(不正常工作):Bootstrap - 更改访问过的链接的颜色

<html lang="en"> 
    <head> 
     <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 
     <meta charset="unicode"> 
     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> 
     <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"> 

     <!--[if lt IE 9]> 
      <script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script> 
     <![endif]--> 
     <link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" type="text/css" rel="stylesheet"> 

     <style type="text/css"> 
       a{ 
       color:#d99a30 !important; 
       &:hover{ color:#37404e !important;} 
       &:visited{ color:#37404e !important;} 
       } 
     </style> 
    </head> 
    <body> 
     <div class="container"> 
      <div class="col-md-8 col-md-offset-2"> 
        <div class="row"> 
         <div class="col-sm-12"> 
          <h3><a href="some_link.html">Link</a></h3> 
         </div> 
        </div> 
      </div> 
     </div> 
    </body> 

感谢您的帮助

回答

5

您正在使用LESS /上海社会科学院的语法,而不是简单的CSS。以下是使用CSS的代码示例。

a { color:#d99a30 !important; } 
a:hover { color:#37404e !important; } 
a:visited { color:#37404e !important; } 

如果你想:hover:visited是相同的,你也可以简化规则太:

a { color:#d99a30 !important; } 
a:hover, a:visited { color:#37404e !important; } 
+1

这种意志!工作。有机会,你也可以删除'!important;'。 –

+0

我也会推荐@TedGoas。 – Marcelo

0

可以使用自定义CSS的所有超链接。您应该使用!important您的自定义CSS,否则这个CSS是行不通的。

a { 
 
    color: blue !important; 
 
    text-decoration: none !important; 
 
} 
 
a:link, a:visited { 
 
    color: blue !important; 
 
} 
 
a:hover { 
 
    color: red !important; 
 
}
<a href="http://www.w3schools.com">W3Sschools Home</a><br> 
 
<a href="http://www.w3schools.com/html/">W3Schools HTML Tutorial</a><br> 
 
<a href="http://www.w3schools.com/css/">W3Schools CSS Tutorial</a> 
 

 
<p><b>Note:</b> The :visited selector style links to pages you have already visited.</p>

0

的“CSS”你写的其实是“无礼”,如果你编译它只会工作。 要改变颜色更换&a动人一切与&括号外,像这样:

a{ 
    color:#d99a30 !important; 
} 

a:hover, a:visited{ 
    color:#37404e !important; 
} 
0

试试这个没有必要使用重要

body a { 
 
    color: #d99a30; 
 
} 
 
body a:hover{ 
 
    color:red; 
 
    } 
 

 
body a:visited{ 
 
    color:black; 
 
    }
<html lang="en"> 
 
    <head> 
 
     <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 
 
     <meta charset="unicode"> 
 
     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> 
 
     <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"> 
 

 
     <!--[if lt IE 9]> 
 
      <script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script> 
 
     <![endif]--> 
 
     <link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" type="text/css" rel="stylesheet"> 
 

 
    
 
    </head> 
 
    <body> 
 
     <div class="container"> 
 
      <div class="col-md-8 col-md-offset-2"> 
 
        <div class="row"> 
 
         <div class="col-sm-12"> 
 
          <h3><a href="some_link.html">Link</a></h3> 
 
         </div> 
 
        </div> 
 
      </div> 
 
     </div> 
 
    </body>