3

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

<section class="first_sect">
    <div class="slider">
        <div class="img_box">
            <img src="img/img1.jpg" alt="google.com" class="opas">
            <img src="img/img2.jpg" alt="google.com" >
            <img src="img/img3.jpg" alt="google.com" >
            <img src="img/img4.jpg" alt="google.com" >
            <img src="img/img6.jpg" alt="google.com" >
            <img src="img/img5.jpg" alt="google.com" >
        </div>
    </div>
</section>

Применяю следующее 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;
}

Вообщем, спасибо за ответы, извините если вопрос нубовский. Только учюсь. Успехов Вам!)

1 ответ 1

3

Ваш вопрос мало касается js.
Но в целом: вся штука в том, что селектор .img_box > img более спецефичен, чем просто селектор по классу, из-за этого стили не применяются. Аналогичный эффект вы можете получить, если сделаете так:

.img_box img {
    opacity : 0; 
}

И перебивать его с помощью такого селектора:

.img_box .opas {
    opacity : 1; 
}

Так должно сработать как вы хотите

UPD
Про специфичность селекторов, да и в целом неплохая теория по html, css есть на Этом ресурсе
Конкретно про специфичность селекторов и их вес:
Хабра
Документация

5
  • Спасибо за ответ, не подскажите где можно почитать про это? 22 ноя 2017 в 10:30
  • @ВладиславДидковский Есть несколько хороших ресурсов, сейчас дополню ответ. Если решение вам подошло - приймите, пожалуйста, мой ответ. 22 ноя 2017 в 10:32
  • @ВладиславДидковский Дополнил ответ, добавил туда несколько полезных ссылок 22 ноя 2017 в 10:37
  • Хороший материал, сделал так .opas { opacity: 1 !important; } 22 ноя 2017 в 13:36
  • @ВладиславДидковский По возможности - не делайте так. Это не очень хороший путь решения вашего вопроса. 22 ноя 2017 в 13:44

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.