样式的Css选择器+不工作

Question

如果按钮被隐藏,我想更改按钮样式.

这是我的示例代码:

HTML:

<button class="first-button" resolved="" style="display: none;">Button</button>
<button class="second-button" resolved="">Button</button>
<button class="third-button" resolved="">Button</button>

CSS:

.first-button[style*="display:none"] + .second-button:not([style*="display:none"]) {
background-color: #ccc !important;
}

我尝试使用chrome,没有任何改变.

谢谢

Answer 1

由于您正在寻找的属性值,您的选择器失败了; 在style属性中; 该属性包含空格字符display: none;,您的属性选择器没有([style*="display:none"]).

如果您修复了这种差异,它可以完美地运行:

.first-button[style*="display:none"] + .second-button:not([style*="display:none"]) {
  background-color: #f90 !important;
}

<button class="first-button" resolved="" style="display:none;">Button</button>
<button class="second-button" resolved="">Button</button>
<button class="third-button" resolved="">Button</button>

JS小提琴演示.

当然,请注意,我确实将颜色更改为#f90,而不是#ccc因为更明显的可见性.

顺便提一下,特定的选择器值得注意的是,!important旗帜 - 几乎可以肯定 - 完全没必要.