Html 悬停一个 div 时更改所有其他 div 上的字体 colored颜色

.a {
      margin-bottom: 1.5em;
    }

    .b {
      margin-bottom: 0.5em;
      display: flex;
    }

    .b:hover {
      background-color: green;
    }

    .c {
      flex: 1;
    }
 
.wrapper:hover .b:not(:hover) .c{
color: red;
}

<div class="wrapper">
<div class="a">
  <div class="b">
    <div class="c">
      <p>one</p>
    </div>
    <div class="c">
      <p>two</p>
    </div>
    <div class="c">
      <p>three</p>
    </div>
  </div>
  <div class="b">
    <div class="c">
      <p>four</p>
    </div>
    <div class="c">
      <p>five</p>
    </div>
    <div class="c">
      <p>six</p>
    </div>
  </div>
</div>

<div class="a">
  <div class="b">
    <div class="c">
      <p>un</p>
    </div>
    <div class="c">
      <p>deux</p>
    </div>
    <div class="c">
      <p>trois</p>
    </div>
  </div>
  <div class="b">
    <div class="c">
      <p>quatre</p>
    </div>
    <div class="c">
      <p>cinq</p>
    </div>
    <div class="c">
      <p>six</p>
    </div>
  </div>
</div>
</div>