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

Question

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

一切正常，应用＆＃34; not-allowed＆＃34;当它被禁用时光标到我的输入但是当输入被禁用时我还需要用class="numericbuttonswrapper"将光标添加到我的div。

在浏览可用的css选择器时，我无法找到答案，这可能吗？

Answer 1

使用adjacent sibling selector (+)

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;