CSS 选择器不工作 +, ~

Question

这让我发疯：

<span class="fa-stack fa-lg">
  <i class="fa fa-circle fa-stack-2x fcc1" style=""></i>
  <i class="fa fa-whatsapp fa-stack-1x fa-inverse fccc1"></i>
</span>
<span class="fa-stack fa-lg">
  <i class="fa fa-circle fa-stack-2x fcc2" style=""></i>
  <i class="fa fa-camera-retro fa-stack-1x fa-inverse fccc2"></i>
</span>

<style>
.fccc1:hover, .fccc2:hover, {
color:#115ebb!important;
}
.fccc1:hover + .fcc1 {
color:white!important;  
}
.fccc2:hover + .fcc2 {
color:white!important;  
}
</style>

悬停的第一个 CSS 规则运行良好。然而，第二个和第三个 css 规则在悬停时更改另一个 class 不起作用。我没有看到代码中有任何错误，据我所知这应该有效。我也试过没有 + 和 ~ 选择器。

任何帮助appriciated。

Answer 1

div + p - 选择紧跟在 <div> 个元素

之后的所有 <p> 个元素

供参考 - CSS Selectors

Answer 2

您的第一条规则同时处理 .fccc1 和 .fccc2，它们都存在。

不过，您的第二条规则适用于 .fccc1 元素跟在另一个 .fccc1 元素之后。在你的情况下，那是不存在的。前面的元素改为 .fcc1。您的规则需要是：

.fcc1:hover + .fccc1

Answer 3

这里有一个使用flex和order

视觉向上遍历的技巧

body {
  background: gray;
}
.fa-stack {
  display: flex;
  flex-direction: column;
}
.fa-stack i:nth-child(1) {
  order: 2;
}
.fa-stack i:nth-child(2) {
  order: 1;
}
  
.fccc1:hover, .fccc2:hover {
color: #115ebb!important;
}
.fccc1:hover + .fcc1 {
color: white!important;  
}
.fccc2:hover + .fcc2 {
color: white!important;  
}

<span class="fa-stack fa-lg">
  <i class="fa fa-whatsapp fa-stack-1x fa-inverse fccc1">Second</i>
  <i class="fa fa-circle fa-stack-2x fcc1" style="">First</i>
</span>
<span class="fa-stack fa-lg">
  <i class="fa fa-camera-retro fa-stack-1x fa-inverse fccc2">Second</i>
  <i class="fa fa-circle fa-stack-2x fcc2" style="">First</i>
</span>

CSS 选择器不工作 +, ~

CSS selector not working +, ~

html

css

hover