html - 禁用同级输入时将 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>

一切正常，在禁用时将“不允许”光标应用于我的输入，但我还需要在输入时使用 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;
}

.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>