Question

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

对于我的打印代码，我正在做的是在文本上方插入一个代码块，并放置一个标题为Print的跨度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 伪选择器以及 {{3} } （如果这些帮助基于先前的元素作为目标）。

如果您可以使用JavaScript，那么事情变得非常简单，只需使用 general sibling combinator (~) 和 .parentNode ：

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>

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

1 个答案: