0

Material-Design-Lite で遊んでいて、スタイルをオーバーライドしたいのですが、うまくいきません。mdl-navigation__link実際にあるパディングを変更したいとしましょ16px 40pxう0px。

カスタム スタイル シートのプロパティをオーバーライドしましたが、成功しませんでした。ただし、他のいくつかのスタイルが適用されます。

.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

4

2 に答える 2

3

セレクターの特異性を高める必要があるだけです。MDL が提供するものの特異性を確認します。.mdl-layout__drawer .mdl-navigation .mdl-navigation__link. これは 3 クラスの特異性なので、約 30 です。2 つのクラスのセレクターを実行しているので、およそ 20 の特異性です。あなたのものが後に続くかどうかにかかわらず、高い特異性が勝ちます.

特異性に関するいくつかの優れたリソース:

于 2015-07-16T14:31:04.343 に答える
0

クラスを 2 倍にしてみてください。それらが同じクラスであっても、1つだけを選択した場合よりも特異性が高くなります.

に頼らずにオーバーライドを許可するのに最適!important

例えば：

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

css-tricksでの特異性を下げるための、このようなその他のトリック

CSS の特異性に関する私のお気に入りのガイド

于 2015-07-16T14:50:55.260 に答える