bootstrap и css <a>

262

06 июля 2017, 00:18

Решил поучить bootstrap. Делал по примеру на видео. Там парень менял свойства <a> в css и у него всё норм работало. Я пишу так же, но у меня не работает.

a { 
  font-size: 40px; 
  color: crimson; 
  background-color: brown; 
} 
 
a:hover, 
a:focus { 
  color: yellow; 
}

<a href="#">HOME</a>

Срабатывает только background-color, а на color, :focus, :hover нет реакции. Если отключить bootstrap, то норм. В чём проблема?

index.html

<!DOCTYPE html> 
<html> 
<head> 
<title>test</title> 
    <meta name="vieport" content="width=device-width, initial-scale=1.0"> 
     
    <link href="css/bootstrap.css" rel="stylesheet"> 
    <link href="css/font-awesome.min.css" rel="stylesheet"> 
    <link href="style.css" rel="stylesheet"> 
 
</head> 
<body> 
     
     
<div class="navbar navbar-inverse navbar-fixed-top"> 
    <div class="container"> 
     
        <div class="navbar-header"> 
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
                <span class="icon-bar"></span> 
                <span class="icon-bar"></span> 
                <span class="icon-bar"></span> 
            </button> 
            <a class="navbar-brand" href="#">OLOL<i class="fa fa-circle"></i></a> 
        </div> 
                <div class="navbar-collapse collapse"> 
                    <ul class="nav navbar-nav navbar-right"> 
                        <li><a href="#">Cats</a></li> 
                        <li><a href="#">Dogs</a></li> 
                        <li><a href="#">Rats</a></li> 
                    </ul> 
         
                </div> 
     
    </div> 
 < 
     
     
</div>    
    <script src="http://code.jquery.com/jquery-latest.js"></script> 
    <script src="js/bootstrap.min.js"></script> 
     
</body> 
</html>

style.css

@import url('https://fonts.googleapis.com/css?family=Anton|Bellefair'); 
 
body { 
    background-color: #f2f2f2; 
    color: green; 
    height: 500px; 
    font-weight: 300; 
    font-size: 16px; 
    font-family: Bellefair; 
    } 
 
 
a { 
font-size: 50px; 
color: crimson; 
} 
 
a:hover,a:focus{ 
     
    color: darkred; 
} 
 
.fa-circle{ 
    color:coral; 
    font-size: 26px; 
}

Answer 1

Всё работает, если свои стили подключать после бутстрапа, а не до:

<link rel=stylesheet href=//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css> 
 
<style> 
a { 
  font-size: 40px; 
  color: crimson; 
  background-color: brown; 
  text-transform: uppercase; 
} 
 
a:hover, a:focus { 
  color: yellow; 
} 
</style> 
 
<a href="#">Home</a>

PS: А заглавные буквы надо делать через text-transform: uppercase.