Material-Design-Lite，在没有 !important 的情况下覆盖样式指南属性答案

【问题标题】：Material-Design-Lite, Override styleguide property without !importantMaterial-Design-Lite，在没有 !important 的情况下覆盖样式指南属性
【发布时间】：2015-07-16 07:10:30
【问题描述】：

我正在使用 Material-Design-Lite，我想覆盖一种样式，但它不起作用。假设我想将mdl-navigation__link 上的填充（实际上是16px 40px）更改为0px。

我已经覆盖了自定义样式表上的属性，但没有成功。但是应用了其他一些样式：

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

应用了边框，但没有应用填充。在 web 开发工具中，我看到我的 padding 属性被忽略（删除线）由于 styleguide.css 我从不包含！

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

覆盖styleguide.css 属性是否更简洁？

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

【问题讨论】：

styleguide.css 不是通过 JS 或构建提供的。它仅适用于微型网站。您能否通过 codepen 或类似工具向我们展示一些复制代码？
当然，codepen在原帖末尾
我没有看到任何 styleguide.css 请求。但是，JS 也无法正常工作，所以如果是问题的原因，谁知道为什么。确保 codepen 功能齐全，而不仅仅是本地源代码的复制和粘贴。
抱歉，他现在可以正常工作了。 codepen结果的“内容”中我的问题的详细信息

标签： css material-design-lite

【解决方案1】：

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

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

【讨论】：

而不是加倍。我已经指定了更多.pgrn-navigation.mdl-navigation .mdl-navigation__link。谢谢

【解决方案2】：

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

非常适合在不诉诸 !important 的情况下允许覆盖

例如：

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

在css-tricks css-tricks 有更多这样的技巧来降低特异性

还有我最喜欢的CSS Specificity指南

【讨论】：