如何在CSS中找到专注孩子的兄弟姐妹

Question

我有以下标记，并希望在select聚焦时为input-inner-button提供样式，如何在CSS/SCSS中做到这一点？

<div class="input-wrapper">
  <div>
    <select>
      <option value="">Select</option>
      <option value="x">x</option>
      <option value="y">y</option>
    </select>
  </div>
  <div class="input-inner-button-group">
    <div class="input-inner-button">Inner Button</div>
  </div>
</div>

更新：我需要在Chrome，FF，IE回到10和Edge中支持该解决方案。

Answer 1

您可以在

select容器上使用较新的:focus-within伪选择器。(有关当前支持，请参阅here(

：focus-inside CSS 伪类表示已获得焦点的元素或包含已获得焦点的元素。

请参阅下面的演示：

.input-wrapper > div:first-child:focus-within + div .input-inner-button {
  background: blue;
}

<div class="input-wrapper">
  <div>
    <select>
      <option value="">Select</option>
      <option value="x">x</option>
      <option value="y">y</option>
    </select>
  </div>
  <div class="input-inner-button-group">
    <div class="input-inner-button">inner button</div>
  </div>
</div>

Answer 2

据我所知，在您的情况下，使用 css 是不可能的(每个浏览器都支持的解决方案(。您必须使用 JS，或者您可以删除作为<select>父级的<div>，并且您可以使用伪类:focus和+选择器的混合

select:focus + .input-inner-button-group .input-inner-button {
    background: green;
}

<div class="input-wrapper">
    <select>
      <option value="">Select</option>
      <option value="x">x</option>
      <option value="y">y</option>
    </select>
  <div class="input-inner-button-group">
    <div class="input-inner-button">my inner button</div>
  </div>
</div>

Answer 3

这在 CSS 中是可能的 - 如果我理解你的问题 - 你想在选择有焦点时更改内部按钮的样式。

您可以在 css 中使用 ：focus 伪选择器和直接同级组合器 ("+"(

您所要做的就是删除选择周围的包装div(以便它是 .input-inner-button-group 的真正同级(，然后当选择聚焦时 - 下一个div(同级(的内容可以成为目标。然后你必须进入那个div才能得到内部div。

我添加了一个按钮来演示并在其顶部放置一个边距，以便在打开时清除选择。

.input-inner-button-group {
  margin-top: 60px;
}
.input-wrapper select:focus + .input-inner-button-group .input-inner-button button {
background: red;
}

<div class="input-wrapper">
  <select>
    <option value="">Select</option>
    <option value="x">x</option>
    <option value="y">y</option>
  </select>
  <div class="input-inner-button-group">
    <div class="input-inner-button">
     <button type="button">Save</button>
    </div>
  </div>
</div>