Css parent*：hover{}和parent:hover*{}之间有什么区别？

我想知道CSS选择器之间的区别是什么。 如果我要更改此选项：

.parent *:hover {}

为此：

.parent:hover * {}

在随后的代码中：

#孩子{
宽度：100%；
身高：100%；
}
.家长{
背景颜色：绿色；
宽度：100px；
高度：100px；
}
.parent:悬停*{
背景色：红色；
}

HTML示例

• .parent*：hover{}

  表示：在悬停状态下（即子体悬停时），使用

  class=“parent”

  将任何元素的所有子体作为目标

• .parent:hover*{}

  意味着使用

  class=“parent”

  瞄准任何元素的所有后代，而

  class=“parent”

  的元素处于悬停状态（请注意，如果子元素处于悬停状态，

  .parent

  也处于悬停状态，即使它们没有形成单一的内聚视觉单元（例如，

  位置：正在使用绝对值）
  

如果您的

有多个子元素，则第一条规则（

.parent*：hover{}

）将只影响一个子元素，而该特定子元素处于悬停状态-因此，如果用户鼠标悬停在另一个元素上，则样式规则将更改

---

第二个规则是，如果鼠标悬停

.parent

，则所有子体的样式都将更改。这不是一个好的样式规则，因为子体选择器将选择

.parent

下的所有内容（例如，每一个

，

，

等）。您可能应该使用更具体的选择器。

简单。请将鼠标悬停到对应位置，然后再悬停到子位置

#孩子{
宽度：100%；
身高：100%；
}
.家长{
背景颜色：绿色；
宽度：100px；
高度：100px；
填充：100px；
}
.parent:悬停*{
背景色：红色；
}
.parent*：悬停{
背景颜色：蓝色；
}

HTML示例

对于

.parent:hover*{}

，当您将鼠标悬停在父对象的任何部分上时，选择器将应用于子对象。您可以通过将鼠标悬停在绿色部分（即父对象的填充）上，在第一个框中看到这一点，子对象的颜色将发生变化

对于

.parent*：hover{}

，选择器仅在子对象悬停时触发。因此在下面的代码段中，对于第二个框，当您悬停在绿色部分（即父对象的填充）上时，子对象的颜色不会改变。但是如果您悬停在白色部分（子对象的框）上，则颜色会改变

#孩子{
宽度：100%；
身高：100%；
}
父母亲
.父母2{
背景颜色：绿色；
宽度：100px；
高度：100px；
边框：1px纯红；
填充：50px；
}
.parent*，.parent2*
{
背景色：白色；
字体大小：50px；
}
.parent:悬停*{
背景色：红色；
}
.parent2*：悬停{
背景色：红色；
}

HTML示例
1.
2.

对于这个特殊的例子，我看不出有什么区别。但是，如果

，则有一个区别。如果
.parent
将有多个子项，或者
#child
将不包括整个
。parent
。