jsfiddle 不工作或我的 css/html？

Question

悬停效果不工作，列表样式类型仍然是项目符号，并且 flexbox 不按我想要的方式工作。出于某种原因，我必须在 BODY 和 A 中指定字体系列，否则它不会出现。我导入 google 字体的方式有什么问题吗？是我的代码有问题还是与 jsfiddle 有关？

HTML:

<body>

<ul class="container">
  <li class="item"><a href="">Home</a></li>
  <li class="item"><a href="">About</a></li>
  <li class="item"><a href="">Services</a></li>
  <li class="item"><a href="">Contact</a></li>
</ul>

</body>

CSS:

@import url('https://fonts.googleapis.com/css?family=Kumar+One');

//GENERAL

body{
  font-family: 'Kumar One', cursive;
}

a{
  text-decoration: none;
  font-family: 'Kumar One', cursive;
}

//CLASSES AND ID'S

.container{
  display: flex;
  justify-content: space-around;
  list-style-type: none;
}

.item{
  width: 8em;
  text-align: center;
  background-color: #10999e;
}

//INTERACTION

.item:hover{
  background-color: #0b6c70;
}

Answer 1

您的问题与您在代码中的注释有关。在 CSS 中，评论写成 /* comment here */

您编写注释的方式，// comment 是一种在 预处理器 SASS（以及许多其他语言）。

因此删除正文中的 font-family 声明（如果需要）并切换注释语法。

Answer 2

问题似乎出在您为 CSS 添加的注释语法错误。

这是适用于 jsfiddle

的固定代码

@import url('https://fonts.googleapis.com/css?family=Kumar+One');

a{
  text-decoration: none;
  font-family: 'Kumar One', cursive;
}

.container{
  display: flex;
  justify-content: space-around;
  list-style-type: none;
}

.item{
  width: 8em;
  text-align: center;
  background-color: #10999e;
}


.item:hover{
  background-color: #0b6c70;
}

jsfiddle 不工作或我的 css/html？

jsfiddle not working or my css/html?

html

css

jsfiddle