Как задать цвет ссылки внутри нескольких элементов?

Question

[maragon]

стиль

.theme_hot { background: red; color: #fff },
.theme_hot a { color: #fff },
.theme_coal { background: black; color: #fff }
.theme_coal a { color: #fff }

разметка

<div class="theme_hot">
  <a href="">Первая</a>
  <ul>
    <li class="theme_coal">
      <a href="">вторая</a>
   </li>
  </ul>
</div>

В моём примере цвет #fff для "первой ссылки" не отработал, как сделать чтобы работало?
Что я не учёл?

Comments

[Дмитрий Локшин]

Скорее всего просто где-то переопределен цвет для первой ссылки, т.к. в указанном варианте цвет должен примениться.
А чтобы наверняка заработало (хотя тоже не факт, т.к. неизвестно чего там у Вас) сделайте следующее:
.theme_hot a { color: #fff !important}
но это очень плохой способ.
А вообще, на будущее, чтобы не было таких путаниц, старайтесь избегать вложенности - посмотрите в сторону именования классов по БЭМ.

[Владимир Проскурин]

И еще не менее важный совет - используйте инструменты разработчика браузера при встрече с такими проблемами. Вот, смотрите чем выше свойство в этой панельке, тем выше у него приоритет. Вы сразу сможете увидеть, применился ли ваш стиль, кто его переопределяет, может быть у вас просто ошибка в значении и.т.д.

Answer 1

[FlamyXD]

Возможно я чего то не понял, но вы уверены в том, что нужно ставить запятые между стилями?
Пробуйте так: https://jsfiddle.net/e9wb637j/