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

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