Question

我最近改用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 &#38 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 &#38 Associati </div>字体类型，然后更改工具栏颜色。

虽然我已经这样做但它不起作用，我甚至无法找到改变工具栏颜色的方法。

提前感谢您的帮助！

Answer 1

这一切都归结为CSS Specificity。确保您的选择器比MDL定义的更具体。我们尝试尽可能多地使用单个类进行定位。有些地方我们将类名复制为更具体而没有额外的标记，并且我们做了子/兄弟选择器的地方以保持整洁（如数据表）。

Material Design Lite忽略不同的字体类型

1 个答案: