如何修改CSS兄弟选择器以排除display:none隐藏元素的匹配？

问题核心原因 #

CSS 的通用兄弟选择器 ~ 仅基于 DOM 结构匹配元素，不会判断元素的可见状态，所以就算设置了 display: none 的 .A 元素依然会被选择器命中，导致样式不符合预期。

解决方案 #

你可以通过 :not() 伪类排除掉被隐藏的 .A 元素即可，分两种常见场景适配：

1. 隐藏是通过内联 style 属性设置的（和你给出的示例一致），修改后的选择器如下：

.A:not([style*="display:none"]) ~ .A:not([style*="display:none"]) .B {
  padding-top: 0;
}

这个选择器的含义是：仅命中跟在没有内联 display:none 的 .A 元素后面、且自身也没有内联 display:none 的 .A 元素内部的 .B 元素，只要有任意一个前后的 .A 被内联样式隐藏，样式就不会生效。

2. 隐藏是通过自定义类（比如 .hidden { display: none; }）设置的，修改后的选择器如下：

.A:not(.hidden) ~ .A:not(.hidden) .B {
  padding-top: 0;
}

补充说明 #

目前原生 CSS 没有通用的 :visible 伪类，所以需要你根据实际项目里隐藏元素的实现方式，对应调整 :not() 里的排除规则即可。如果需要同时排除 opacity:0、visibility:hidden 等隐藏状态，在 :not() 里追加对应规则即可。

内容的提问来源于stack exchange，提问作者kosnkov