随着CSS改变兄弟姐妹状态悬停

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中的最后一个大孩子上，我需要改变兄弟姐妹的边框颜色。

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>

希望有所帮助！