Question

悬停效果不起作用，列表样式类型仍然是子弹，并且flexbox不能正常工作。出于某种原因，我必须在BODY和A中指定字体系列，否则它不会出现。导入谷歌字体的方式有什么问题吗？我的代码有问题还是与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语法添加的注释。

以下是处理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;
}

Answer 2

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

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

因此，删除正文上的font-family声明（如果您愿意）并切换注释语法。

jsfiddle不工作或我的CSS / HTML？

2 个答案: