Question

我有以下标记，并且想在input-inner-button集中时给select赋予样式，如何在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）

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

请参见下面的演示

.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或可以删除作为<div>父级的<select>，并且可以使用伪类: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>

如何找到将孩子集中在CSS中的同级

3 个答案: