我只想选择其父母<buttons>
的{{1}},并排除其父母display: block
的{{1}}。
有没有办法实现这个目标?
答案 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。请查看下面的代码段以供参考。
display:none
&#13;
$( ".btnShow" ).click(function() {
$( ".btn:hidden" ).show( "fast" );
});
&#13;
.hidden{
display:none;
}
.btnShow{
display:block;
margin-top: 50px;
}
&#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;&#13;&#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>