0

I'm playing with Material-Design-Lite and I want to override a style but it won't work. Let say that I woudl like to change the padding on mdl-navigation__link which is actually 16px 40px to 0px.

I have overrided the property on my custom style sheet but without success. However some other styles are applied :

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

The border is applied but not the padding. And into teh web develope tools I see that my padding property is ignored (strikethrough) du to a styleguide.css that I never include !

I suppose that styleguide.css is included by the javascript file. So the only trick to apply my custom padding is to mark it as !important.

Is it a cleaner way to override styleguide.css properties ?

Edit : Here is the codepen : http://codepen.io/anon/pen/ZGjYqo

4

2 回答 2

3

您只需要增加选择器的特异性。检查 MDL 提供的特性。.mdl-layout__drawer .mdl-navigation .mdl-navigation__link. 这是一个 3 类特异性，所以大约 30。你正在做一个二类选择器，所以大约 20 个特异性。无论您的是否出现，高特异性都会获胜。

一些关于特异性的好资源：

于 2015-07-16T14:31:04.343 回答
0

尝试将课程加倍。即使它们是同一类，特异性也会比只选择一个时更大。

非常适合允许覆盖而不诉诸于!important

例如：

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

更多类似这样的技巧，以降低css-tricks的特异性

还有我最喜欢的CSS Specificity指南

于 2015-07-16T14:50:55.260 回答