html - 悬停语法之间的区别

Question

这两种不同的悬停选择器语法有什么区别？

#id:hover p 
#id p:hover

Answer 1

#id:hover p - 当悬停在父 #id 元素上时，将选择后代 p 元素。

#id p:hover - 悬停时将选择后代 p 元素(#id 元素的后代)结束了。

以此为例:

.example1:hover p,
.example2 p:hover {
  color: red;
}
div {
  border: 1px solid;
}
div p {
  border: 1px solid #f00;
}

<div class="example1">
  <p>.example1:hover p</p>
  <p>The p element is styled when hovering over the parent.</p>
</div>

<div class="example2">
  <p>.example2 p:hover</p>
  <p>The p element is styled when hovering over the p element</p>
</div>