html - Css 第 n 个 child :hover ~ first-child {. ..}

Question

当我将鼠标悬停在第二个 child 身上时，我正试图改变第一个 child 。仅使用 html 和 css 如何做到这一点？

(有了波浪号/~，我似乎可以在 html 代码中向下选择子代，但不能向上选择。我必须使用不同的选择器才能向上选择吗？)

格茨

<div id="container">
        <div id="box1"></div>
        <div id="box2"></div>
</div>

<style>
   #box1 {
      height: 100px;
      width: 100px;
      background-color: red;
   }

   #box2 {
      height: 100px;
      width: 100px;
      background-color: lime;
   }

   #box2:hover ~ #box1 {
      height: 300px;
      width: 300px;
      background-color: yellow;
   }

</style>

Answer 1

通用兄弟选择器，这是波浪号所表达的，只会选择匹配元素之后(而不是之前)的兄弟。

The elements represented by the two sequences share the same parent in the document tree and the element represented by the first sequence precedes (not necessarily immediately) the element represented by the second one.

引用:http://www.w3.org/TR/css3-selectors/#general-sibling-combinators

---

在你的情况下，可能只有一个 CSS 机会来存档它。其实两个...

机会 1

在 parent :hover 上，改变 child 。

#container:hover div:first-child {
  background-color: #cff;
}

在您的情况下，这需要 #container 为 display: inline-block;，否则当将鼠标悬停在两者的空白区域右侧时，红色框也会发生变化箱子。

斌:http://jsbin.com/dilitucije/1

适用于所有现代浏览器和大多数旧版浏览器。

机会 2

我会使用具有定义顺序的 flexbox 来反转这两个元素的呈现。由于元素的呈现顺序是相反的，但 DOM 顺序不是，所以这是可行的。

CSS:

.reversed {
  display: flex;
  flex-direction: column-reverse; /* reverse rendering */
}

#container div:hover:first-child ~ div {
  background-color: #cff;
}

Flexbox规则的解释:

• 使用 Flexbox ( great explanation , W3C spec )
• 按行排列元素(容器是“列”)，反转.reversed容器中元素的顺序(第一个DOM节点最后呈现, 最后一个 DOM 节点最先渲染)

将类添加到您的#container

<div id="container" class="reversed">...</div>

斌:http://jsbin.com/piyokulehe/1

适用于 FF 34、Chrome 39，至少也应该适用于 IE 11(可能不是 IE10)。

更新:

• 修复了错误的row-reverse(示例使用column-reverse，符合您的要求)
• 删除了不必要的 justify-content(因为元素被渲染成行，所以这不是必需的)
• 添加了对 Flexbox 解决方案的解释