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

Question

我只想 select <buttons> 其 parents 具有 display: block 并排除那些 <buttons> 其 parents 具有 display:none.

有什么办法可以做到吗？

Answer 1

您可以查看jquery。下面的代码表示

"Get all buttons, filtered by ones whose parent is visible on page", loop through and print html of each one.

$(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>

Answer 2

没有

根据适用于它们的属性值，没有 select 或哪些 select 元素。

我认为 CSS 引入这样的功能也不实用。想象一下：

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

Answer 3

在 CSS 到 select 中没有这样的 select 或可用的属性值。您可以通过使用 :hidden select 或使用 display:none 查找按钮来尝试使用 jquery。检查以下代码段以供参考。

$( ".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 4

实际上，select 元素有一个 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 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

如果那些 display 样式声明为 inline 那么您可以使用以下选择器：div[style*="display: none;"] （如果元素具有内联样式属性包含 "display: none;" 然后应用样式)

属性选择器：

The CSS attribute selector matches elements based on the presence or value of a given attribute.

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

属性包含选择器：

When looking to find an element based on part of an attribute value, but not an exact match, the asterisk character, *, may be used within the square brackets of a selector. The asterisk should fall just after the attribute name, directly before the equals sign. Doing so denotes that the value to follow only needs to appear, or be contained, within the attribute value.

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

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

Is there a selector to exclude display: none elements?

html

css

display