css - 通过 css 媒体查询和生成的内容动态添加#anchors 到链接

Question

在我的每个页面中，就在主要内容 block 的上方，我有一个命名的 anchor 元素，如下所示:

<a id="jump"></a>

我网站的 css 包含一个媒体查询，当浏览器宽度小于 770(iPad 纵向)时重置样式。我想将 css 插入到这个查询分支中，这样我所有的主要站点链接都会自动附加对该 anchor 的引用，如下所示:

<a href="about-us/#jump">About Us</a>

我可以通过 CSS 对生成的内容执行此操作吗？

Answer 1

CSS 3 指定功能强大generate/replace capabilitie s 但我很确定您不能仅使用 CSS 修改现有标签的属性。

可以读取属性的值并将该值包含在生成的内容中，例如:

[href]::after { content: footnote; }
[href]::after::alternate { content: attr(href); }

但是，我认为并不是所有的部分都可以实现您想要的行为。

或者，您可以在所有 链接中包含 anchor ，然后根据您的媒体查询以不同方式定位 anchor ？如果屏幕很宽， anchor 可能位于页面的最顶部。如果宽度小于 770，则 anchor 将位于页面下方。