交叉引用背后的变化

HTML输出的变化

Quarto 1.4中交叉引用的变化还引入了对图表和其他可交叉引用元素底层HTML输出的某些更改。对于大多数用户来说，这些变化是不可见的。然而，如果您正在操作Quarto的HTML输出，您可能会受到影响。特别是：

• HTML图表的DOM结构以前是这样的，以下CSS选择器会起作用：

  div#fig-elephant > figure > figcaption.figure-caption

  在Quarto v1.4中，现在变为：

  div#fig-elephant > figure.quarto-float.quarto-float-fig > figcaption.quarto-float-caption.quarto-float-fig

  以下是一个图表的最小完整HTML输出：

  <div id="fig-1" class="quarto-figure quarto-figure-center anchored">
    <figure class="quarto-float quarto-float-fig figure">
    <div aria-describedby="fig-1-caption-0ceaefa1-69ba-4598-a22c-09a6ac19f8ca">
      <img src="./img/content.jpg">
    </div>
    <figcaption id="fig-1-caption-0ceaefa1-69ba-4598-a22c-09a6ac19f8ca" class="quarto-float-caption quarto-float-fig">
    图表&nbsp;1: 这是一个标题。
    </figcaption>
    </figure>
  </div>

  具体来说：

  • 所有可交叉引用的元素都使用带有quarto-float类的figure HTML元素。
  • 不同的浮动类型通过CSS类quarto-float-fig（或-tbl，-lst，或自定义交叉引用类型的ref_type）以及额外的CSS类figure，table等来区分。如果元素是一个子浮动，这将是quarto-subfloat-fig。
  • 类似地，浮动标题使用带有quarto-float-caption类（或如果它们是子浮动的quarto-subfloat-caption）的figcaption元素，并且还具有quarto-float-* CSS类。

  这种设置允许所有“浮动”元素通过单一的CSS规则统一目标化，并且允许特定的浮动类型及其标题通过单一的额外CSS选择器目标化。

• 图像本身曾经有一个环绕的段落；它们不再有。

• 浮动包含一个额外的div用于ARIA引用，以便标题能够被适当地和统一地引用。因此，如果一个表格出现在浮动中，其标题将被提升到图表节点本身。