html - 无法识别 CSS 目标计数器属性

Question

我正在尝试使用 target-counter 来描述引用。

我是从 List Apart article 中发现的关于用 HTML/CSS 制作一本书。只有 one other StackOverflow question这对我没有帮助。

Chrome、Firefox 或 Opera 无法识别属性 target-counter，但在 CSS2 spec 中提到了它而且我找不到任何其他说明它是否受支持的文档。所以我无法判断是我的代码还是浏览器的问题。

你可以在this Dabblet snippet上看到代码，或查看下面的代码片段。

我的 HTML:

<h1 id="foo">Root level</h1>
<p><a href="#bar">linking to bar</a> and stuff</p>

<h1 id="bar">Second heading</h1>

<h2 id="sub">Subhead</h2>
<p>Hey there <a href="#foo">with a link to foo</a></p>

和 CSS:

h1 {
    counter-increment: section;
}
h1::before {
    content: counter(section) ". ";
}
a::after {
    content: leader('.') target-counter(attr(href), section);
}

任何建议表示赞赏。

Answer 1

target-counter() 是一个 CSS3 函数，而不是 CSS2 函数。它在您链接到的文档中是这样说的!

由于该功能是被遗忘已久的 CSS3 生成内容模块草案的一部分，您不会找到任何浏览器支持它，因为当前的实现仅支持 level 2 Generated Content spec .这意味着当前的浏览器仅支持将 2 级 attr() 函数与 ::before 和 上的 content 属性一起使用>::after 伪元素。

此外，您链接到的 ALA 文章提到了 Prince ，一款用CSS将Web文档转成分页文档的软件。正如我在 another answer 中提到的(问题引用了同一篇 ALA 文章!)，您所指的打印样式可能仅受支持并供 Prince 使用，而不是任何 Web 浏览器的打印功能。