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

Question

我正在玩 Material-Design-Lite，我想覆盖一个样式，但它不起作用。假设我想将 mdl-navigation__link 上的填充更改为 16px 40px 到 0px.

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

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

已应用边框但未应用内边距。在 web 开发工具中，我看到我的填充属性被忽略（删除线）到我从未包含的 styleguide.css！

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

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

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

Answer 1

您只需要增加选择器的特异性。检查 MDL 提供的内容的特异性。 .mdl-layout__drawer .mdl-navigation .mdl-navigation__link。这是一个 3-class 特异性，所以大约 30。你正在做一个两个 class 选择器，所以大约 20 个特异性。不管你的来不来，以高特异性为准。

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

Answer 2

尝试将 classes 加倍。即使它们相同 class 特异性也会比仅选择一个时更高。

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

例如：

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

在 css-tricks

处使用更多类似的技巧来降低特异性

还有我最喜欢的 CSS Specificity

指南

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

Material-Design-Lite, Override styleguide property without !important

css

material-design-lite

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

Material-Design-Lite, Override styleguide property without !important

css

material-design-lite

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