CSS隱藏除指定之外的所有元素

Question

是否有以下jQuery代碼的CSS等價物：

$('#myElement').parents().siblings().hide()
$('#myElement').siblings().hide()

這通過隱藏除父元素和給定元素的后代之外的所有內容完全符合我的要求。 我想創建一個具有相同效果的@media print CSS規則。

Answer 1

您可以嘗試使用3級選擇器偽類來實現這一點：not（），但瀏覽器支持似乎很差： caniuse.com：not（）選擇器 。

編輯：

我假設您可以為包含#myElement的父元素添加不同的類。

或者，您可以在以下情況下定位所有標記，例如<p>, <section> <div>之外的<p>, <section>等，將其更改為： .container :not(.parent):not(.different)

 .container div:not(.parent):not(.different) { display: none; } .children, .parent-sibling { width: 100px; height: 100px; background-color: red; margin-bottom: 10px; } .parent-sibling { background-color: blue; } .different { background-color: green; } 

 <div class="container"> <div class="parent"> <div class="children"></div> <div class="children different"></div> <div class="children"></div> <div class="children"></div> </div> <div class="parent-sibling"> <div class="children"></div> <div class="children"></div> <div class="children"></div> <div class="children"></div> </div> <div class="parent-sibling"></div> </div> 

Answer 2

你可以制作自定義css類隱藏div然后用jquery在打印示例之前顯示它們：

CSS

.hidden{display:none;}

jQuery的：

$('#btn').click(function(){
$('.hidden').show();
});

這對你來說會更容易。