разница между img.slider и .slider

Question

Мне было просто любопытно: в чем разница между img.slider и .slider (когда все мои изображения имеют класс «слайдер»).

Я заметил, что когда я пытался нацелить изображения с именем класса «слайдер» через запись

.slider { margin-top: 10px; }

^ не работает

img.slider { margin-top: 10px; }

^ сработало.

Почему это так? Спасибо!

Answer 1

Правила специфичности в CSS-состоянии гласят, что селекторы с более низкой специфичностью, такие как .slider, отменяются селекторами с более высокой специфичностью, такими как img.slider. Если вы хотите узнать больше о том, как специфичность рассчитывается и применяется, подумайте о прочтении раздела W3C, посвященного специфичности, по адресу http://www.w3.org/TR/CSS21/cascade.html#specificity

Answer 2

Как указывает ссылка reisio, более «конкретное» правило CSS переопределяет менее конкретное правило.Кроме того, если бы у вас был класс «слайдер» на любом элементе, кроме img, правило img.slider не будет применяться.

Answer 3

http://w3.org/TR/CSS21/cascade.html#specificity