Question

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

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

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

应用边框但不应用填充。对于网络开发工具，我看到我的填充属性被忽略（删除线）到styleguide.css，我从未包括！

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

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

修改： 这是codepen： http://codepen.io/anon/pen/ZGjYqo

Answer 1

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

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

Answer 2

尝试将课程加倍。即使它们属于同一类，其特异性也会大于仅选择一个时的特异性。

完美允许覆盖而不诉诸!important

例如：

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

更多这样的技巧可以降低css-tricks

的特异性

指南