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

Question

是否有以下jQuery代码的CSS等价物：

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

通过隐藏除父元素和给定元素的后代之外的所有内容，这正是我想要的。我想创建一个具有相同效果的@media print CSS规则。

Answer 1

您可以尝试使用3级选择器伪类来实现：not（），但浏览器支持似乎很差：caniuse.com :not() selector。

修改

我假设您可以为包含您的#myElement的父元素添加不同的类。

或者，您可以定位所有代码，以防万一<p>, <section>之外的<div>等，并更改为.container :not(.parent):not(.different)

＆＃13;

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

你可以制作自定义css类来隐藏div然后用jquery在打印示例之前显示它们：

CSS

.hidden{display:none;}

jquery的：

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

对你来说更容易。