禁用兄弟输入时将CSS应用于元素

Question

我在尝试将样式应用于兄弟元素时遇到了问题.

.ac_numeric input[type=text][disabled] {
  cursor: not-allowed;
}

<div class="ac_numeric">
  <input type="text" />
  <div class="numericbuttonswrapper">
    <div class="numericupbutton"></div>
    <div class="numericdownbutton"></div>
  </div>
</div>

这一切都运行正常,当它被禁用时将"不允许"光标应用于我的输入但我还需要在禁用输入时将光标添加到我的div class="numericbuttonswrapper".

通过可用的css选择器时我找不到答案,这可能吗？

Answer 1

使用相邻的兄弟选择器(+)

.ac_numeric input[type=text][disabled],
.ac_numeric input[type=text][disabled] + .numericbuttonswrapper {
    cursor: not-allowed;
}

.ac_numeric input[type=text][disabled],
.ac_numeric input[type=text][disabled] + .numericbuttonswrapper {
    cursor: not-allowed;
}

<div class="ac_numeric">
      <input disabled type="text" />
      <div class="numericbuttonswrapper">
          <div class="numericupbutton">test</div>
          <div class="numericdownbutton">testing2</div>
      </div>
</div>