Question

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

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

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样式被声明为 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/

Answer 3

没有

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

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

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

Answer 4

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

＆＃13;

display:none

＆＃13;

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

＆＃13;

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

＆＃13;

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进行检查。以下代码表示

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

＆＃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;

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

6 个答案: