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

Question

我只想选择父母有display: block <buttons> display: block并排除那些父母有display:none <buttons> 。

有没有办法实现这个目标？

Answer 1

实际上有一个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> 

Answer 2

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

属性选择器：

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

Src： https ： //developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors

属性包含选择器：

当寻找基于属性值的一部分而不是精确匹配的元素时，星号字符*可以在选择器的方括号内使用。 星号应位于属性名称之后，直接位于等号之前。 这样做表示只需要在属性值中显示或包含要遵循的值。

Src： https ： //learn.shayhowe.com/advanced-html-css/complex-selectors/

Answer 3

没有。

没有选择器根据适用于它们的属性值选择元素。

---

我不认为CSS引入这样的功能也是不切实际的。 想像：

:has-property-value(display: none) {
   display: block;
}

Answer 4

CSS中没有这样的选择器可供其属性值选择。 您可以使用:hidden方法尝试使用jquery :hidden选择器以查找带有display:none按钮。 请查看下面的代码段以供参考。

 $( ".btnShow" ).click(function() { $( ".btn:hidden" ).show( "fast" ); }); 

 .hidden{ display:none; } .btnShow{ display:block; margin-top: 50px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="button" value="button 1" class="btn"> <input type="button" value="button 2" class="btn"> <input type="button" value="button 3" class="btn hidden"> <input type="button" value="button 4" class="btn"> <input type="button" value="button 5" class="btn hidden"> <input type="button" value="button 6" class="btn"> <input type="button" value="button 7" class="btn"> <input type="button" value="Show hidden buttons" class="btnShow"> 

Answer 5

到目前为止，这对于纯CSS是不可能的，除非你明确地将内联css指定为style="display: none" 。

您可以使用一些javascript来过滤一组可见的buttons 。

 var buttons = document.querySelectorAll('.block button'); var visibleButtons = []; buttons.forEach(function (element) { if (window.getComputedStyle(element.parentNode).display !== 'none') { visibleButtons.push(element); } }); console.log(visibleButtons); 

 .block { display: block; } .hidden { display: none; } 

 <div class="block"> <button>btn 1</button> </div> <div class="block hidden"> <button>btn 2</button> </div> <div class="block"> <button>btn 3</button> </div> 

Answer 6

你可以用jquery来检查。 以下代码表示

“获取所有按钮，通过其父级在页面上可见的按钮进行过滤”，循环并打印每个按钮的html。

 $(document).ready(function(){ $(":button").filter(function() { return $(this).parent().is(':visible') }).each(function(){ console.log($(this).html()); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <p class="intro" style="display:block"> My name is someone. <button> a </button> <button> b </button> </p> <p>I live somewhere.</p> <p>My best friend is someone.</p> Who is your favourite: <ul id="find" style="display:none"> <li>One</li> <li>Two</li> <li><button> x </button> <button> y </button></li> </ul>