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

时间:2017-10-17 09:18:25

标签: html css display

我只想选择其父母<buttons>的{​​{1}},并排除其父母display: block的{​​{1}}。

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

6 个答案:

答案 0 :(得分:6)

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

答案 1 :(得分:3)

如果这些display样式被声明为 inline ,那么您可以使用以下选择器: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/

答案 2 :(得分:2)

没有

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

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

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

答案 3 :(得分:1)

CSS中没有这样的选择器可供其属性值选择。您可以使用console.log(A.__proto__) // [Function] (Function.prototype) console.log(B.__proto__) // [Function: Object] (Object) 选择器查找带有:hidden的按钮,尝试使用jquery。请查看下面的代码段以供参考。

&#13;
&#13;
display:none
&#13;
$( ".btnShow" ).click(function() {
  $( ".btn:hidden" ).show( "fast" );
});
&#13;
.hidden{
  display:none;
}
.btnShow{
  display:block;
  margin-top: 50px;
}
&#13;
&#13;
&#13;

答案 4 :(得分:1)

到目前为止,纯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>

答案 5 :(得分:0)

您可以使用jquery进行检查。以下代码表示

  

&#34;获取所有按钮,按父母在页面上显示的按钮进行过滤&#34;,   循环并打印每一个的HTML。

& #13;
&#13;
$(document).ready(function(){
$(":button").filter(function() { return $(this).parent().is(':visible') 
       }).each(function(){
		      console.log($(this).html());
		});
});
&#13;
<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>
&#13;
&#13;
&#13;