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。这意味着当前浏览器仅支持在attr()和content伪元素上使用::before属性的2级::after函数。

此外，您链接的ALA文章提到Prince，这是一个用于将Web文档转换为带有CSS的分页文档的软件。正如我在another answer中提到的那样（问题引用了相同的ALA文章！），您所指的打印样式可能只支持Prince打算使用，而不是任何Web浏览器的打印功能。< / p>

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

1 个答案: