Изменить цвет шрифта в ul li с помощью класса

Question

У меня есть динамическое меню, которое генерируется CMS в следующем формате:

<ul class="nav">
  <li><a href="#">Home</a></li>
  <li><a href="#">About Us</a></li>
  <li><a href="#">Blog</a></li>
  <li><a href="#" class="btn btn-blue">Dashboard</a></li>
</ul>

Вот CSS:

.nav li {
    list-style: none;
    float: left;
    padding: 15px;
}
.nav a {
    color: #777;
    text-decoration: none;
}
.nav a:hover {
    color: green;
}
.btn-blue {
    border: 1px solid red;
    color: red;
    padding: 5px 20px;
    border-radius: 25px;
    background-color: #fff;
}
.btn-blue:hover {
    border: 1px solid red;
    color: white;
    background-color: red;
}

Проблема в том, что класс "btn-blue" не соблюдается. Цветовой код для btn-blue, похоже, не работает. Как мне решить эту проблему?

Вот JSFIDDLE DEMO

Answer 1

Это потому, что .nav a является более конкретным селектором, чем .btn-blue.Взгляните на статью MDN , чтобы получить больше информации о специфичности

Что касается вашей проблемы, просто измените .btn-blue на .nav .btn-blue.

Answer 2

Все сводится к специфике. Попробуйте вместо этого, для вашей CSS:

.nav li {
    list-style: none;
    float: left;
    padding: 15px;
}

.nav a {
    color: #777;
    text-decoration: none;
}

.nav a:hover {
    color: green;
}

.nav .btn-blue {
    border: 1px solid red;
    color: red;
    padding: 5px 20px;
    border-radius: 25px;
    background-color: #fff;
}

.nav .btn-blue:hover {
    border: 1px solid red;
    color: white;
    background-color: red;
}

Если вы хотите узнать больше об этом, вот сообщение на MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity