如何使用sass在子div的焦点上定位父div。

Question

我怎样才能使它在聚焦输入上改变文本的背景颜色..？我究竟做错了什么？请让我知道，谢谢

.parent_div {
  background: lightblue;
  .child_div {
    input {
      color: grey;
      background: blue;
      &:focused {
        color: purple;
        background: white;
      }
      &:focused~grand-child-of-parent {
        opacity: 0.7;
        background: red;
      }
    }
  }
}

<div class="parent_div">
  <div class="first_child">
    <input type="text" />
  </div>
  <p class="second_child"> is simply dummy text of the printing and typesetting industry.</p>
</div>

Answer 1

不幸的是，这是不可能的，因为没有“祖父母”选择器。

您可以在聚焦时更改输入本身的背景和文本，但不能在不使用JavaScript的情况下修改父元素的样式。

对于这种情况，请通过JavaScript收听焦点事件，并将修改器类添加/删除到例如父元素。

HTML：

<div class="parent-class">
  <input class="field" type="text" />
  <div class="child-class">
    <p>Bla</p>
  </div>
</div>

CSS：

.child-class {
  background: red;
}
.focused .child-class {
  background: green;
}

JavaScript（jQuery）：

$('.field').on('focus', function() {
  $(this).parent().addClass('focused');
})
$('.field').on('blur', function() {
  $(this).parent().removeClass('focused');
})