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

Question

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

对于我的 Print 代码，我正在做的是在文本上方插入一个代码块并放置一个名为 Print 的 span 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之后的所有元素

Answer 1

简而言之，没有。

您示例中的问题是 <span id="print">是嵌套的，不幸的是，有 no parent selector in CSS 。因此，不可能使用基于 #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-type 和 ::nth-child 伪选择器和 general sibling combinator ( ~ ) 如果这些帮助基于前面的元素定位。

如果您可以访问 JavaScript，事情就会变得非常简单，因为您可以简单地使用 .parentNode 和 .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>