Material-Design-Lite, Override styleleguide property без! Important

Question

Я играю с Material-Design-Lite, и я хочу переопределить стиль, но он не будет работать. Скажем, я хотел бы изменить дополнение на mdl-navigation__link, которое на самом деле 16px 40px до 0px.

Я переопределил свойство на моей собственной таблице стилей, но безуспешно. Однако применяются некоторые другие стили:

.my-navigation .mdl-navigation__link { 
    padding: 0px; 
    border: 1px solid red; 
} 

Граница применяется, но не набивка. И в инструменты для веб-разработки я вижу, что мое свойство заполнения игнорируется (зачеркивает) до styleguide.css, которое я никогда не включаю!

Я полагаю, что styleguide.css включен в файл javascript. Таким образом, единственный трюк для применения моего пользовательского дополнения - отметить его как !important.

Это более чистый способ переопределить styleguide.css свойства?

Edit: Вот codepen: http://codepen.io/anon/pen/ZGjYqo

Answer 1

Вам просто нужно увеличить специфичность ваших селекторов. Проверьте специфику того, что обеспечивает MDL. .mdl-layout__drawer .mdl-navigation .mdl-navigation__link. Это специфика 3-х классов, примерно 30. Вы делаете селектор двух классов, что примерно соответствует 20 спецификациям. Получается ли ваша после или нет, побеждает высокая специфичность.

Некоторые хорошие ресурсы на специфичность:

• Smashing Magazine
• MDN
• CSS tricks

Answer 2

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

Идеально подходит для разрешения переопределения, не прибегая к !important

, например:

.mdl-navigation__link.mdl-navigation__link { 
    padding: 0px; 
    border: 1px solid red; 
} 

Больше трюков, как это для более низкой специфичности в css-tricks

И моего любимого гида по CSS Specificity