CSSのhoverの書式 - 自分用めも

昔作ったページをメンテしていてはまったこと。

<!DOCTYPE html>
<html lang="ja">
<head>
	<style>
		.test1 {
			width: 30em;
			height: 2em;
			background-color: black;
			color: white;
		}
		.test1: hover {
			background-color: yellow;
			color: red;
		}
		.test2 {
			width: 30em;
			height: 2em;
			background-color: black;
			color: white;
		}
		.test2:hover {
			background-color: yellow;
			color: red;
		}
	</style>
</head>
<body>
<span class="test1">てすと1</span>
<hr>
<span class="test2">てすと2</span>
</body>
</html>

こんなのがあったとして、test1のhoverは効かない。
test2のは利く。
違いはcssのhoverの前の半角空白の有無。

cssの書式は半角空白で定義を区切るので
当たり前な結果で、多分基本中の基本なんでしょうが…はまりました。。