gpt4 book ai didi

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

转载 作者:太空宇宙 更新时间:2023-11-04 11:05:28 25 4
gpt4 key购买 nike

我最近从 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>字体类型,然后更改工具栏颜色。

虽然我已经做到了,但它不起作用,我什至无法找到改变工具栏颜色的方法。

预先感谢您的帮助!

最佳答案

这一切都归结为 CSS Specificity .确保您的选择器比 MDL 定义的选择器更具体。我们尝试使用单个类来尽可能多地进行定位。在某些地方我们复制类名以使其更具体而无需额外标记,在某些地方我们使用子/兄弟选择器来保持整洁(如数据表)。

关于css - Material Design Lite 忽略不同的字体类型,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34006368/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com