Переопределение значений css

Question

Иногда, когда я объявляю значение для чего-то, а позже я хочу переопределить его с другим значением, он не работает. Например (дерзость моделирование):

.wrapper-breadcrumbs { 
    h1.breadcrumb-title { 
     font-size: 46px; 
    } 
} 

И чуть ниже я кладу это ...

@media (max-width: 768px) { 
    h1.breadcrumb-title { 
     font-size: 32px; 
    } 
} 

... он не будет работать, и я вижу в осмотре элемента Chrome, что первый один фактически перевернул второе значение, хотя второе утверждение ниже первого. Но если я повторяю имена родительского класса, как это ...

@media (max-width: 768px) { 
    .wrapper-breadcrumbs h1.breadcrumb-title { 
     font-size: 32px; 
    } 
} 

Тогда это работает! Для меня это кажется странным ... есть ли какое-то правило для этого? Я что-то упускаю? Почему мне нужно написать имя родительского класса?

Answer 1

Это потому, что первое правило имеет более высокую специфичность (2 класса и 1 элемент) против 1 класса и 1 элемент для второго правила.

Второе правило должно иметь такую ​​же или более высокую специфичность, чтобы переопределить первый. Я рекомендую посмотреть статью Specifics on Specificity о трюках CSS для получения более подробной информации.

Как уже упоминалось в комментариях, вы также можете поместить !important после font-size во втором правиле, однако, что, как правило, очень плохая практика и вы должны изменить ваше правило CSS, чтобы иметь более высокую специфичность вместо этого, который чище и поможет вам избежать головных болей при отладке вашего CSS :)

Answer 2

Это связано с тем, что первый селектор имеет более высокий прецедент, чем второй селектор. Подобный селектор идентификаторов имеет более высокий прецедент, чем селектор класса. Поэтому, если вы применяете какой-либо стиль, используя селектор идентификаторов, а затем самостоятельно пытаетесь переопределить его с помощью селектора классов, чем он не будет работать.

.wrapper-breadcrumbs { 
    h1.breadcrumb-title { 
     font-size: 46px; 
    } 
} 

В этом случае у вас есть два класса и один атрибут, поэтому его прецедент следует.

прецедент = (рядный, идентификатор, класс, элемент/псевдо)

прецедент = (0,0,2,1) // левый элемент имеет больше, чем прецедент правого элемента.

@media (max-width: 768px) { 
    h1.breadcrumb-title { 
     font-size: 32px; 
    } 
} 

прецедент = (0,0,1,1)

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

@media (max-width: 768px) { 
    .wrapper-breadcrumbs h1.breadcrumb-title { 
     font-size: 32px; 
    } 
} 

прецедент = (0,0,2,1)

В этом случае он имеет одинаковый приоритет в качестве первого элемента, так что будет перезаписывать предыдущий стиль и будет работать на этих данных.

Вы можете использовать следующую ссылку, чтобы рассчитать приоритет селекторов CSS.

http://specificity.keegan.st/

Всегда пытаюсь преодолеть эту проблему путем организации приоритета селектора вместо размещения важно! с CSS стилем, как он заменит значение по умолчанию приоритета селекторов и в случае огромного CSS затруднит для его отладки.