CSS Active le lien ne fonctionne pas

J'ai vu qu'il y a une erreur ici, comme il se doit :active et pas .active, pour le remplacer:

.navigation a.active {
  background: #29abe2;
  color: #fff;
  border-radius: 5px;
}

Avec:

.navigation a:active {
  background: #29abe2;
  border-radius: 5px; 
  color: #fff;
}

D'autre, si on vous en parle chaque page ayant un état actif, alors que le CSS que vous avez écrit est correct. Dans votre code HTML, vous devez ajouter ceci:

<div class="seven columns navigation" id="navigation">
  <a href="#" class="active">Page1</a>
  <a href="#">Page2</a>
  <a href="#">Page3</a>
  <a href="#">Page4</a>
  <a href="#">Page5</a>
</div>

Maintenant, ce lien sera affiché dans l'état actif. Il doit être fait pour chaque page, si vous êtes à l'aide de HTML, ou il peut être fait en utilisant la programmation si vous utilisez quelque chose comme PHP. Donc, la même chose en PHP serait:

<div class="seven columns navigation" id="navigation">
  <a href="#"<?php if ($page == 1) echo ' class="active"'; ?>>Page1</a>
  <a href="#"<?php if ($page == 2) echo ' class="active"'; ?>>Page2</a>
  <a href="#"<?php if ($page == 3) echo ' class="active"'; ?>>Page3</a>
  <a href="#"<?php if ($page == 4) echo ' class="active"'; ?>>Page4</a>
  <a href="#"<?php if ($page == 5) echo ' class="active"'; ?>>Page5</a>
</div>

a:visited est en fait votre".active de l'état. Pour l'effet qui a été à l'origine vous demander ce qui se passait.

Vous devez l'inclure dans votre a: pseudo classes si vous allez essayer et de l'utiliser de cette façon.

L'établissement d'un "défaut/reset" de l'état de votre <a> éléments permettra d'éviter ce type de "WTF?" scénarios:

a:link { color:black }
a:hover { color:blue }
a:visited, a:active, a:focus { color:red }

Lorsque vous souhaitez mettre un lien particulier pour montrer "mis en évidence" sur sa page correspondante, vous êtes mieux d'utiliser un ID ou une Classe (selon votre utilisation):

<a id="highlight">Home</a>
<a>About</a>
<a>Contact</a>

MODIFIER

Relisez votre question à nouveau. #navigation a .active-link{... ne fonctionne pas pour vous à cause de l'espace entre a et .active-link. Vous êtes en train de cibler un enfant de a avec le nom de la classe de active-link. Fix #1 serait a.active-link.

Abstraction de ce que vous êtes en train de lire ci-dessus à propos de PHP, Cibleur, etc. Il semble que vous êtes juste essayer de faire de votre navigation 'évidence'/changer pour juste la page correspondant au lien de la valeur liquidative. Vous pouvez facilement le faire avec directement en HTML/CSS (si vous avez des problèmes avec cela, le code côté serveur solutions viens de vous frustrer plus). Voir les trois <a> les éléments de ma réponse. Puis ajouter ceci dans votre CSS (Corrigé n ° 2):

a#highlight { color:red }

Je crois que votre snafu est un produit de l'utilisation des noms de classe qui sont trop près de "réservés" dans les noms de CSS (si vous avez manqué une.actifs vs a:active, même si les deux SONT VALIDES, ils sont faciles à manquer, lorsque vous êtes à la relecture du code). (Fix #3)

Mieux à l'utilisation de jQuery pour la compatibilité de navigateur

<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
  $( document ).ready(function() {
    var urlArray = window.location.pathname.split( '/' );
    var pagAtual =urlArray[urlArray.length -1];
    $("a[href*="+pagAtual+"]").css("color","#67E8A7");
  });
</script>

Essayer de le remplacer .navigation avec le n ° de navigation, il n'y a id="navigation",et non pas une classe.

J'ai eu le même problème, mais je l'ai résolu de la façon suivante, mais certaines choses sont étranges:

La app.component.html fichier:

    <div class="container">
      <nav class="navbar" >
        <form class="form-inline">
          <a routerLinkActive="active" routerLink="list">List</a>
          <a routerLinkActive="active" routerLink="create" 
             style="padding-left: 20px;">Create</a>
        </form>
      </nav>
      <router-outlet></router-outlet>
    </div>

La app.composante.css fichier:

    /* unvisited link */
    a.link {
      color: blue;
    }

    /* selected link */
    a.active {
      color: hotpink;
    }

    /* visited link (This doesn't work well, so I don't use it in my app)*/
    a.visited {
      color: green;
    }

    /* mouse over link */
    a:hover {
      color: red;
    }

Choses bizarres:

1. Pour couleur du lien actif, "un.active" œuvres, alors que "a:active" ne PAS travail;

2. Pour hover couleur, "a:hover" œuvres, alors que "un.hover" ne PAS travail.

3. Pour visité la couleur du lien, si j'utilise "a:visited", d'autres couleurs seront désactivé.

Il y a d'autres cas encore, mais ce serait trop parler dans les détails.

Il m'a fallu du temps pour comprendre.

Par la voie, routerLinkActive="active" est nécessaire. Je me suis débarrassé de lui juste pour le tester, et ça ne fonctionne pas. Donc je l'ai mis en arrière, et puis il a bien fonctionné.