2015-03-16 4 views
0

Я не могу изменить цвет моих ссылок. Я проверил другие сообщения SO и W3Schools, но он не работает. Вся моя CSS выглядит так до сих порне может изменить цвет ссылки в chrome

div.nav{ 
    text-align: center; 
} 

a{ 
    text-decoration: none; 
    color: black; 
} 

но мои ссылки всегда мигает черный (или красный или ж/д) при загрузке страницы, а затем синеет.

HMTL:

<div class="container-fluid"> 
      <div class="nav"> 
       <nav> 
        <a href="#">stuff</a> 
        <a href="#">stuff</a> 
        <a href="#">stuff-stuff</a> 
        <a href="#">stuff</a> 
        <a href="#">stuff</a> 
        <a href="#">stuff</a> 
        <a href="#">stuffstuff</a> 
        <a href="#">stuff</a> 
        <a href="#">stuff</a> 
       </nav> 
      </div> 
     </div> 

Мой браузер Chrome, и я использую Bootstrap 3.2.0 из CDN

+0

Если вы проверяете ссылку, у нее есть синий цвет, применяемый к нему бутстрапом? Я не могу вспомнить, заявляют ли они это или нет. –

+0

Я создал скрипт (http://jsfiddle.net/1t0dov5o/) из вашего примера, и я не могу найти с ним ничего плохого. – mmgross

+0

@ShanRobertson Cool. Я не знал, что ты можешь это сделать. И да, к нему применено синее. Могу ли я переопределить это из моей внешней таблицы стилей без указания идентификаторов ссылок или их маркировки? – user137717

ответ

0

попробовать:

a{ 
    text-decoration: none; 
    color: black !important; 
} 
a:visited{ 
    text-decoration: none; 
    color: black !important; 
} 

или поставить свой стиль после того, как ссылки на CDN bootstrap

+1

'! Important' не следует использовать, если это абсолютно необходимо ... и, в этом случае это не ... – racecarjonathan

+0

Я хочу, чтобы он проверял, работает ли это - таким образом мы можем знать, добавляет ли он ссылку на стиль в cdn до или после тега стиля. – Inahmias

0

Если вы посетили вашу ссылку, возможно, она переключилась в состояние «visisted». Чтобы настроить таргетинг на гиперссылку с состоянием посещения, вы можете вызвать следующее в CSS.

a:visited { 
    color: black; 
} 

Есть в общей сложности четыре гиперссылка состояний, нажмите на ссылку ниже, чтобы увидеть их: http://www.w3schools.com/css/css_link.asp

0

Вы должны ссылаться на начальную загрузку, а затем вашего файл CSS

неправильно: Ваш CSS первого

<style> 
 
    div.nav { 
 
     text-align: center; 
 
    } 
 

 
    a{ 
 
     text-decoration: none; 
 
     color: black; 
 
    } 
 
</style> 
 
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" /> 
 

 
<div class="container-fluid"> 
 
    <div class="nav"> 
 
    <nav> 
 
     <a href="#">stuff</a> 
 
     <a href="#">stuff</a> 
 
     <a href="#">stuff-stuff</a> 
 
     <a href="#">stuff</a> 
 
     <a href="#">stuff</a> 
 
     <a href="#">stuff</a> 
 
     <a href="#">stuffstuff</a> 
 
     <a href="#">stuff</a> 
 
     <a href="#">stuff</a> 
 
    </nav> 
 
    </div> 
 
</div>

Справа: Bootstrap первого

<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" /> 
 
<style> 
 
    div.nav { 
 
     text-align: center; 
 
    } 
 

 
    a{ 
 
     text-decoration: none; 
 
     color: black; 
 
    } 
 
</style> 
 

 
<div class="container-fluid"> 
 
    <div class="nav"> 
 
    <nav> 
 
     <a href="#">stuff</a> 
 
     <a href="#">stuff</a> 
 
     <a href="#">stuff-stuff</a> 
 
     <a href="#">stuff</a> 
 
     <a href="#">stuff</a> 
 
     <a href="#">stuff</a> 
 
     <a href="#">stuffstuff</a> 
 
     <a href="#">stuff</a> 
 
     <a href="#">stuff</a> 
 
    </nav> 
 
    </div> 
 
</div>

+0

Почему downvote? Я даже демонстрирую с живым примером, что может быть неправильно. Это зависит от ОП, чтобы решить, работает ли это решение для него –

0

После того, как связь была нажата пользователем, он становится «посетил» ссылку, и вы должны будете применить стиль к этому a:visited государству. Попробуйте использовать CSS ниже.

div.nav{ 
    text-align: center; 
} 

a{ 
    text-decoration: none; 
    color: #0000; 
} 

a:visited { 
color: #0000; 
} 
Смежные вопросы