时间戳

首页 > 解决方案 > 在特定 ID 后切换所有 div 的可见性

html - 在特定 ID 后切换所有 div 的可见性

问题描述

我正在尝试在 Squarespace 中为某个文本块创建打印功能。为了避免管理员输入代码，我希望能够使用内置的所见即所得的简单性。然而，这限制了我对某些元素的编码深度。

对于我的打印代码，我正在做的是在文本上方插入一个代码块并放置一个名为打印的跨度 ID：

<span id="print">Document to print</span>

squarespace 的工作方式是将其嵌套在包含的 DIV 中。这些是自动生成的，因此由某些类调用它，例如html-block不会工作，因为有许多不同的 div 类型。

<div class="sqs-block code-block sqs-block-code" data-block-type="23" id="block-yui_3_17_2_1_1534372053149_74057">
  <div class="sqs-block-content">
    <span id="print">Document to print</span>
  </div>
</div>
<div class="sqs-block html-block sqs-block-html" data-block-type="2" id="block-yui_3_17_2_1_1534372053149_78086">
  <div class="sqs-block-content">
    <p>Printed text line 1</p>
    <p>Printed text line 2</p>
  </div>
</div>

所以我试图做的只是将页面上的所有内容分类为隐藏，然后将所有内容分类id="print"为可见：

@media print {
  body * {
    visibility: hidden;
  } 
  div ~ #print, div ~ #print * {
    visibility: visible;
  }
  div ~ #print {
    position: absolute;
    left: 0;
    top: 0;
  }
}

这导致一切都被隐藏了，除了：

<span id="print">Document to print</span>

有没有办法在之后显示所有元素#print

标签： htmlcsscss-selectors

解决方案

简而言之，没有。

您的示例中的问题<span id="print">是嵌套的，不幸的是， CSS 中没有父选择器。因此，在您的示例中，除了print 元素本身之外，不可能使用基于#print. 就 CSS 选择器而言，您必须从父级到子级（或后续兄弟级）。

话虽如此，定位元素有多种不同的方法，您可能会发现 DOM 中有一种组合可以让您定位相关元素。例如，SquareSquare确实提供了唯一的 ID。会#block-yui_3_17_2_1_1534372053149_78086改变它在 DOM 中的位置吗？如果没有，您可以按上述方式定位它。您还可以基于以下目标.html-block，甚至类似div[data-block-type="2"]：

div[data-block-type="2"] {
  color: red;
}
<div class="sqs-block code-block sqs-block-code" data-block-type="23" id="block-yui_3_17_2_1_1534372053149_74057">
  <div class="sqs-block-content">
    <span id="print">Document to print</span>
  </div>
</div>
<div class="sqs-block html-block sqs-block-html" data-block-type="2" id="block-yui_3_17_2_1_1534372053149_78086">
  <div class="sqs-block-content">
    <p>Printed text line 1</p>
    <p>Printed text line 2</p>
  </div>
</div>

别忘了你也可以使用::nth-of-typeand::nth-child伪选择器和通用兄弟组合器 ( ~)如果它们帮助基于前面的元素定位。

如果您可以访问 JavaScript，事情就会变得非常简单，因为您可以简单地使用.parentNodeand .nextElementSibling：

const print = document.getElementById('print');
const parent = print.parentNode.parentNode;
const after_print = parent.nextElementSibling;

console.log(after_print.id);
<div class="sqs-block code-block sqs-block-code" data-block-type="23" id="block-yui_3_17_2_1_1534372053149_74057">
  <div class="sqs-block-content">
    <span id="print">Document to print</span>
  </div>
</div>
<div class="sqs-block html-block sqs-block-html" data-block-type="2" id="block-yui_3_17_2_1_1534372053149_78086">
  <div class="sqs-block-content">
    <p>Printed text line 1</p>
    <p>Printed text line 2</p>
  </div>
</div>

推荐阅读