css – parent *：hover {}和parent：hover * {}之间有什么区别？

我想知道CSS选择器之间有什么区别.
如果我改变这个：

.parent *:hover {}

对此：

.parent:hover * {}

在随后的代码中：

#child {
  width: 100%;
  height: 100%;
}
.parent {
  background-color: green;
  width: 100px;
  height: 100px;
}

.parent:hover * { 
  background-color: red;
}

<html>
  <head>
    <title>HTML Sample</title>
  </head>
  <body>
    <div class="parent">
      <div id="child"></div>
    </div>
  </body>
</html>

没有任何变化,悬停效果保持不变.我在这里错过了什么？

解决方法

> .parent *：hover {}表示：使用class =“parent”定位任何元素的所有后代,而处于悬停状态“(即,当后代悬停时)
> .parent：hover * {}表示使用class =“parent”定位任何元素的所有后代,而class =“parent”的元素处于悬停状态(请注意,如果后代元素悬停,那么.parent,即使它们不形成单个有凝聚力的视觉单元(例如,位置：绝对正在使用).

如果您的< div class =“parent”>有多个孩子然后第一个规则(.parent *：hover {})只会影响单个后代,而特定的后代是悬停的 – 所以如果用户鼠标悬停另一个元素,那么样式规则将会改变.

第二个规则就是如果.parent是鼠标悬停的话,那么所有后代都会改变它们的样式.这不是一个好的样式规则,因为后代选择器将选择.parent下的所有内容(例如,每个< span>,< a>,< p>等).您可能应该使用更具体的选择器.

css – parent ：hover {}和parent：hover {}之间有什么区别？

解决方法

相关文章