Почему .gallery .photos img свойства перебивают свойства, которые прописаны в .showed ( HTML / CSS3)?

Question

[Юра Сторчака]

почему .gallery .photos img свойства перебивают свойства , которые прописаны в .showed ( HTML / CSS3) ?
https://codepen.io/freelancetesting/pen/LYEzgRr

Я не пойму именно того , почему напрямую через класс нельзя достучаться на свойств, я понимаю что свойства .gallery .photos img они перебивают свойства , которые прописаны в .showed , я не пойму именно почему напрямую нельзя достучаться до свойств класса, и в итоге прописывать .gallery .photos img.showed челую цепочку (череду ) чтобы свойства заработали . Механику такого поведения не могу понять...

Comments

[Lynn «Кофеман»]

Попробуйте прочитать про основы CSS. В частности про вес селекторов.

[Юра Сторчака]

Алексей Тен, я уже разобрался , спс

Answer 1

[Lynx_y]

Дело в весе селетора.
.gallery .photos img имеет больше веса, чем просто класс .showed.
Если нужно использовать только класс .showed, то можно ко всем свойствам, которые он переписывает, добавлять !important. Например opacity: 1!important;

Comments

[Юра Сторчака]

спс