Не работает слайдер JavaScript

Всем привет, вообщем практикуюсь на JavaScript, дело дошло до слайдера, и тут заминка. Делаю вот такой вот контейнер:

Применяю следующее css правило:
.img_box > img { opacity: 0; }
Делаю класс c opacity:1 для первого потомка img, далее через js через итерацию и newclass меняю класс у последующих элементов.
Собственно вопрос, почему приоритет для
.img_box > img { opacity : 0; }
Выше чем класс
.opas { opacity: 1; }
И при переборе классов, opacity остается неизменным.
P.S решил проблему задав свойство опасисти, через класс
.slider img { opacity: 1; }
Вообщем, спасибо за ответы, извините если вопрос нубовский. Только учюсь. Успехов Вам!)

Ответ

Ваш вопрос мало касается js Но в целом: вся штука в том, что селектор .img_box > img более спецефичен, чем просто селектор по классу, из-за этого стили не применяются. Аналогичный эффект вы можете получить, если сделаете так:
.img_box img { opacity : 0; }
И перебивать его с помощью такого селектора:
.img_box .opas { opacity : 1; }
Так должно сработать как вы хотите
UPD Про специфичность селекторов, да и в целом неплохая теория по html, css есть на Этом ресурсе Конкретно про специфичность селекторов и их вес: Хабра Документация