Question

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

#id:hover p 
#id p:hover

Answer 1

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

#id p:hover - 会在悬停时选择后代p元素（#id元素的后代）。

以此为例：

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

当id:hover p被悬停时，

p会选择元素id内的id元素。

当id p:hover被悬停时，

p会选择元素id内的p元素。

结果通常是相同的，但仍然是不同的元素徘徊。

Answer 3

他们两个都选择了p元素，它是id='id'元素的子元素或后代元素，但区别在于它被选中和的时候。被选中的元素。

#id:hover p - 此处p在id='id'上悬挂p的元素时被选中（父母或祖父母是悬停的）。这将选择所有后代#id p:hover标记。
p - 当p本身悬停时（{而不是父母或祖父母），p会被选中。这将仅选择正在上悬停的p。

正如您在下面的代码段中看到的那样，将鼠标悬停在color标记本身（文字 Child para 或 Descendant para ）将更改文字{ {1}}仅beige p实际上正在悬停，而将鼠标悬停在其他部分（即父级）上会更改所有后代background p } red。

您还会注意到，将鼠标悬停在p标记上也会导致其background变为红色。这是因为当p被悬停时，父母/祖父母也会隐蔽地徘徊。

＆＃13;

#id:hover p {
  background: red;
}
#id p:hover {
  color: beige;
}

＆＃13;

<div id='id'>
  Some content
  <p>Child para</p>
  <p>Child para</p>
</div>
<div id='id'>
  Some content (grandparent)
  <div> Some content (parent)
    <p>Descendant para</p>
    <p>Descendant para</p>
  </div>
</div>

＆＃13;

悬停语法之间的区别

3 个答案: