Barre de navigation Comment changer la couleur du texte?

.navbar-default .navbar-brand signifie que le style sera appliqué à .navbar-brand uniquement lorsqu'il est placé sous .navbar-default . Il n'y a pas de tel parent dans votre cas.

Vous pouvez le changer en .navbar .navbar-brand ou ajouter .navbar-default à la balise nav ci-dessus

Si vous utilisez un framework comme bootstrap, il peut être difficile de remplacer les styles par défaut. Dans ce cas, vous avez deux options:

Utilisez un identifiant

Donnez à l'élément que vous souhaitez styliser n'importe quel identifiant. Il a la spécificité la plus élevée.

.navbar-default .navbar-brand {
    color: #ff0000 !important;
}

Utilisez !important -

Bien que ce ne soit pas très recommandé, l'utilisation de !important remplace même id. Dans ton cas -

#mynav{
    color: #ff0000;
}

Comme @Yegor Androsov l'a mentionné, il n'y a pas de .navbar-default . Par conséquent, la couleur du texte que vous essayez d'appliquer ne fonctionnera pas comme vous l'avez:

.navbar .navbar-brand{
    color: #ff0000;
}

Considérer:

.navbar-default .navbar-brand {
    color: #ff0000;
}

Cela fonctionnera pour le code tel qu'il est dans la capture d'écran. Cependant, si vous modifiez et incluez .navbar-default , n'oubliez pas d'ajuster votre spécificité de manière appropriée.

Je ne vois aucun élément avec la classe navbar-default , donc je pense que c'est la raison pour laquelle la règle ne fonctionne pas.

Cela devrait être mieux:

document.querySelectorAll('.navbar-default');
document.querySelectorAll('.navbar');
document.querySelectorAll('.navbar .navbar-brand');

Il est appliqué à tous les éléments correspondant .navbar-brand sélecteur .navbar-brand (ce qui signifie les éléments avec l'attribut class contenant navbar-brand ) à l'intérieur de tous les éléments correspondant .navbar sélecteur .navbar (éléments avec la class contenant navbar ).

Vous pouvez le tester très rapidement dans la console de votre navigateur avec la méthode document.querySelectorAll() :

.navbar .navbar-brand {
    color: #ff0000;
}

Chaque commande renverra un tableau d'éléments correspondant à votre sélecteur CSS que vous pouvez développer et mettre en évidence les éléments sur la page lorsque vous placez votre souris dessus.