悬停效果不起作用，列表样式类型仍然是子弹头，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;
}
似乎问题出在您添加的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;
}
您的问题与代码中的注释有关。在CSS中，注释与/* comment here */类似
按照您编写注释的方式，// comment是一种注释语法，可在预处理器SASS(以及许多其他语言)中使用。
因此，删除正文上的font-family声明(如果需要的话)，并切换出注释语法。