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 属性中；属性包含一个space字符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 Fiddle demo.

当然，请注意，我确实将颜色更改为 #f90，而不是 #ccc，这是为了更明显的可见性。

顺便说一下，考虑到特定的选择器，值得注意的是 !important 标志几乎可以肯定是完全不必要的。

Css 样式选择器 + 不工作

Css selector for style and + not working

css

frontend

less