禁用同级输入时将 CSS 应用于元素答案

【问题标题】：Applying CSS to element when sibling input is disabled禁用同级输入时将 CSS 应用于元素
【发布时间】：2018-03-09 21:35:55
【问题描述】：

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

.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 选择器时找不到答案，这可能吗？

【问题讨论】：

“我无法通过谷歌搜索找到答案（因为这是一个特殊的需求）” - 你的问题标题复制并粘贴到谷歌中，给我developer.mozilla.org/en-US/docs/Web/CSS/… 为第一个结果。

标签： html css sass

【解决方案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>

【讨论】：