Question

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

.parent *:hover {}

到此：

.parent:hover * {}

在后续代码中：

＆＃13;

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

＆＃13;

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

＆＃13;

没有任何更改，悬停效果保持不变。我在这里错过了什么吗？

Answer 1

.parent *:hover {}表示：定位class="parent"的任何元素的所有后代，而处于悬停状态“（即，后代悬停时）
.parent:hover * {}表示定位具有class="parent"的所有元素的所有后代，而class="parent"的元素处于悬停状态（请注意如果一个后代元素悬停，.parent也是如此，即使它们没有形成单一的内聚视觉单元（例如正在使用position: absolute）。

如果您的<div class="parent">有多个孩子，那么第一个规则（.parent *:hover {}）只会影响单个后代，而特定后代会悬停 - 所以如果用户鼠标 - 超过另一个元素然后样式规则会改变。

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

Answer 2

易。请徘徊到parrent然后再转移给孩子。

#child {
  width: 100%;
  height: 100%;
}
.parent {
  background-color: green;
  width: 100px;
  height: 100px;
  padding: 100px;
}

.parent:hover * { 
  background-color: red;
}

.parent *:hover { 
  background-color: blue;
}

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

Answer 3

对于.parent:hover * {}，只要将鼠标悬停在父级的任何部分上，选择器就会应用于子级。您可以通过悬停绿色部分（即父级的填充）在第一个框中看到此内容，并且子项的颜色会发生变化。

对于.parent *:hover {}，只有在孩子徘徊时才会触发选择器。因此，在下面的代码段中，对于第二个框，当您将鼠标悬停在绿色部分（即父级的填充）上时，子项的颜色不会发生变化。但如果你将鼠标悬停在白色部分（即孩子的盒子）上，颜色会发生变化。

＆＃13;

#child {
  width: 100%;
  height: 100%;
}
.parent,
.parent2{
  background-color: green;
  width: 100px;
  height: 100px;
  border: 1px solid red;
  padding: 50px;
}

.parent *, .parent2 *
{
  background-color: white;
  font-size: 50px;
}

.parent:hover * { 
  background-color: red;
}

.parent2 *:hover { 
  background-color: red;
}

＆＃13;

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

＆＃13;

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

3 个答案:

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

3 个答案:

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