我最近从 Polymer 转向了 Material Design Lite。我正在尝试了解什么最适合我需要做的事情。
我从 MDL 网站 (GETMDL) 上的演示工具栏开始，在复制它之后我尝试更改标题字体，但它似乎没有得到。这是我的代码(index.html):
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<link href='https://fonts.googleapis.com/css?family=Roboto+Mono' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
<script src="./mdl/material.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<!-- Always shows a header, even in smaller screens. -->
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
<header class="mdl-layout__header">
<div class="mdl-layout__header-row">
<!-- Title -->
<div class="mdl-layout-title"> C. Piersigilli & Associati </div>
<!-- Add spacer, to align navigation to the right -->
<div class="mdl-layout-spacer"></div>
</div>
</header>
<div class="mdl-layout__drawer">
<span class="mdl-layout-title">Title</span>
<nav class="mdl-navigation">
<a class="mdl-navigation__link" href="">Link</a>
<a class="mdl-navigation__link" href="">Link</a>
<a class="mdl-navigation__link" href="">Link</a>
<a class="mdl-navigation__link" href="">Link</a>
</nav>
</div>
<main class="mdl-layout__content">
<div class="page-content"></div>
</main>
</div>
</body>
</html>
还有，这里是 style.css
div {
font-family: "Roboto Mono";
}
我想做的是改变 <div class="mdl-layout-title"> C. Piersigilli & Associati </div>字体类型，然后更改工具栏颜色。
虽然我已经做到了，但它不起作用，我什至无法找到改变工具栏颜色的方法。
预先感谢您的帮助!
最佳答案
这一切都归结为 CSS Specificity .确保您的选择器比 MDL 定义的选择器更具体。我们尝试使用单个类来尽可能多地进行定位。在某些地方我们复制类名以使其更具体而无需额外标记，在某些地方我们使用子/兄弟选择器来保持整洁(如数据表)。
关于css - Material Design Lite 忽略不同的字体类型，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34006368/