我在CSS中有以下代码：
a{
margin: 10px;
padding: 10px;
background-color: black;
color: white;
font-family: Cambria;
text-decoration: none;
}
a:hover {
background-color: grey;
}
你看，这里的代码工作正常。实现了我的链接在悬停时变为灰色的预期结果。这里的问题是想知道为什么当我在a和/或:hover之间添加空格时，代码停止将背景颜色属性更改为灰色。
这是我的HTML代码仅供参考
<!DOCTYPE html>
<html>
<head>
<title>Crescive</title>
<link rel="stylesheet" href="./style.css" />
<meta charset="utf-8>
</head>
<body>
<main> <!-- I want people to click this -->
<header>
<h1>Crescive</h1>
<p>A customs forms service!</p>
<a href="./create.html">Try it out!</a>
</header>
</main>
</body>
</html>
PS 附带说明一下，如果有人能告诉我我是否充分利用了切片标签，那将不胜感激！
因为如果你在a和:hover之间放置一个空格，它不再与链接匹配，但它正在寻找其中的悬停元素。
示例：https://jsfiddle.net/ze2g56v4/
添加空格的选择器等于：
a *:hover {
...
}
：hover 选择器用于在将鼠标悬停在元素上时选择元素。参考 https://www.w3schools.com/cssref/sel_hover.asp
在"a">和"：hover"之间放置一个空格意味着"a"元素(不是自身(的所有悬停后代(不仅是子元素(都将采用定义的样式。
:hover被称为Pseudo类。
伪类表示元素的状态，还有其他类，如:active, :focus, :after, :before等。
它们需要放在你的CSS选择器旁边，没有空格才能工作，因为它再次引用了元素的STATE。
例
a:hover在定位点的 ：悬停状态上说