Question

我制作了一个简单的待办事项列表，我可以在每次用户输入时将新项目附加到现有列表中，然后按Enter键。

我想更改字体，然后将font-family应用到Body标签中。但是它仅适用于我现有的元素，而不适用于已添加的新元素。

＆＃13;

$("input").on("keypress", function(e) {
  var newToDo = $(this).val();
  if (e.which == 13) {
    $("ul").append('<li><span><i class="fa fa-bomb" aria-hidden="true"> ' + newToDo + '</li>');
    $(this).val("");
  }
})

＆＃13;

body {
  font-family: Roboto;
}

body {
  background: #36D1DC;
  /* fallback for old browsers */
  background: -webkit-linear-gradient(to right, #5B86E5, #36D1DC);
  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to right, #5B86E5, #36D1DC);
  /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto:400,700,500">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
<div id="container">

  <h1>TO DO LIST <i class="fa fa-bolt" aria-hidden="true"></i></h1>
  <input placeholder="Add New Todo" />
  <ul>
    <li><span><i class="fa fa-bomb" aria-hidden="true"></i></span> TEST 1</li>
    <li><span><i class="fa fa-bomb" aria-hidden="true"></i></span> TEST 2</li>
    <li><span><i class="fa fa-bomb" aria-hidden="true"></i></span> TEST 3</li>
  </ul>


</div>

＆＃13;

问题： 1.为什么用户输入创建的新条目使用DIFFERENT字体，尽管我试图通过BODY TAG使用相同的字体。

我试过的POC： 1.通过在所有css上指定相同的字体，确保没有覆盖。例如。所有类，ID都有＆＃34; font-family：Roboto;＆＃34;

Answer 1

如果我理解正确，那么可能是因为没有正确设置append，因为它缺少一些关闭的html标记（结束i和span）。将该行更新为：

$("ul").append('<li><span><i class="fa fa-bomb" aria-hidden="true"></i></span> ' + newToDo + '</li>');

我认为（没有代码演示），因为你没有关闭i它将应用于Font Awesome的字体包装到用户输入的文本

Answer 2

您的初始列表项目的文本（＆＃34;测试1＆＃34;）位于<i>元素之外。

当您插入项目时，虽然您错过了结束</i>和</span>标记，因此该文字被视为位于<i>内并且它是字体由font-awesome.css中的.fa规则设置。

CSS字体系列仅适用于同一类中的某些元素

2 个答案: