是否有一个选择器来排除 display: none 元素？

Question

我只想选择 <buttons> <buttons> 的父母拥有 display: block display:none

有什么办法可以做到这一点？

原文由 alex 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

如果这些 display 样式声明为 _内联_，那么您可以使用以下选择器： div[style*="display: none;"] （如果元素具有包含“display: none;”的内联样式属性，则应用样式）

属性选择器：

CSS 属性选择器 根据给定属性的存在或值来匹配元素。

_来源： https ://developer.mozilla.org/en-US/docs/Web/CSS/Attributeselectors

属性包含选择器：

当查找基于属性值的一部分而不是完全匹配的元素时，可以在选择器的方括号内使用星号字符 *。星号应该紧跟在属性名称之后，等号之前。这样做表示要遵循的值只需要出现或包含在属性值中。

来源： https ://learn.shayhowe.com/advanced-html-css/complex-selectors/

原文由 UncaughtTypeError 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

实际上有一个 CSS3 解决方案来选择没有 display:none 样式的元素，或者给出明确的 style 属性：

 *:not([style*="display: none"]) button{ ... }

演示：

 *:not([style*="display: none"]) button{
    color:yellow;
}

 <p style="display:block">
  My name is A.
  <button>
a
</button>
</p>
<p style="display: none">
  <button>
b
</button>
</p>

原文由 cнŝdk 发布，翻译遵循 CC BY-SA 3.0 许可协议