css - 使用 CSS 在悬停时更改 sibling 的状态

Question

简单说明:如果该元素是此 div 的最后一个元素，我想更改同级边框颜色。

更深入

结构

<div id="parent">
    <div id="child">
        <div class="grand-child"></div>
        <div class="grand-child"></div>
        <div class="grand-child"></div>
        <div class="grand-child"></div>
        <div class="grand-child"></div>
    </div>
    <div id="sibling"></div>
</div>

如果您将鼠标悬停在子 div 中的最后一个孙子上，我需要更改 sibling 的边框颜色。

Answer 1

您是否尝试过使用 :last-child CSS 选择器？在您的示例中，它可能看起来像这样:

div.grand-child:last-child:hover {
    border: 1px solid #000;
}

<div id="parent">
  <div id="child">
    <div class="grand-child">First item</div>
    <div class="grand-child">Second item</div>
    <div class="grand-child">Third item</div>
    <div class="grand-child">Fourth item</div>
    <div class="grand-child">Fifth item</div>
  </div>
  <div id="sibling"></div>
</div>

希望对您有所帮助!