CSS Укладка не «каскадирование»?

Question

Я обновляю сайт someones. Их разметка выбора <a> теги, как это:

#wrapper a{color: red;} 

Какой штраф. Но если я создаю <div> внутри оболочки и дать ему <a> тегов собственного стайлинга, например:

.mydiv a{color: white;} 

Это просто оленью кожу работы - color:white в моей <div> переопределен цветом: красный в упаковке, даже несмотря на то. mydiv css находится ниже #wrapper css на моей внешней таблице стилей. Что больше, каждый другой стиль - цвет фона, границы и т. Д. - отлично работает!

Answer 1

Это называется specificity.

Селектор с атрибутом id более специфичен, чем селектор с атрибутом class (бывшие точек к одному элементу, но последний указывает на нескольких элементов), так что селектор с id имеет приоритет над вашими независимо от того, заказ.

Ваш селектор должен быть более конкретными для того, чтобы переопределить другой селектор:

#wrapper .mydiv a{color: white;} 

Answer 2

Причина ваше правило CSS будет перезапись потому, что приоритет правил стиля во многом зависит от специфики, в которой они» re определено.

.myClass a менее конкретный, чем #myID a, поскольку выбор класса подразумевает более широкий диапазон элементов, на которые влияет правило, чем идентификатор. Чтобы гарантировать, что ваше правило имеет приоритет над старым, просто используйте #wrapper .mydiv a в качестве вашего селектора, тем самым повышая специфика вашего правила, чтобы превзойти его.