Material-Design-Lite，覆盖没有！important的styleguide属性 [英] Material-Design-Lite, Override styleguide property without !important

问题描述

我在使用Material-Design-Lite，我想重写一个样式，但它不会工作。让我说，我woudl喜欢改变 mdl-navigation__link 这实际上是 16px 40px 到 0px 。

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;
}

应用边框而不是填充。和进入web开发工具，我看到我的padding属性被忽略（删除线）du到 styleguide.css ，我从来不包括！

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 !

我假设 styleguide.css 包含在javascript文件中。因此，应用我的自定义填充的唯一技巧是将它标记为！important 。

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.

要覆写 styleguide.css 属性？

编辑：
代码：
http://codepen.io/anon/pen/ZGjYqo

推荐答案

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

You just need to increase the specificity of your selectors. Check the specificity of what MDL provides. .mdl-layout__drawer .mdl-navigation .mdl-navigation__link. This is a 3-class specificity, so about 30. You are doing a two class selector, so roughly 20 specificity. Whether yours comes after or not, the high specificity wins.

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

Some good resources on specificity:

• 粉碎
  杂志


• MDN


• CSS技巧

• Smashing Magazine
• MDN
• CSS tricks

这篇关于Material-Design-Lite，覆盖没有！important的styleguide属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！