Question

将鼠标悬停在<span>后代的每个<h1>标记上时，将background-color设置为blue，将color设置为white。我尝试了:hover h1 span，但仍然显示错误。

{
  background-color: blue;
  color: white;
}

Answer 1

我相信您正在寻找：

h1 > span:hover {
  background-color: blue;
  color: white;
}

>引用直系孩子。 MDN "Child combinator"

Answer 2

h1>span:hover {
  background-color: blue;
  color: white;
}

<!DOCTYPE html>
<html>

<head>
</head>

<body>
  <h1><span>Hello</span></h1>
  <h1><span>Hello</span></h1>
  <h1><span>Hello</span></h1>
  <h2><span>HI</span></h2>
</body>

</html>

将鼠标悬停在作为<h1>后代的每个<span>标签上时，将background-color设置为blue，将color设置为white

2 个答案: