使用CSS通过HTML重写器设置元素顺序
💡
原文英文，约500词，阅读约需2分钟。
📝
内容提要
作者通过使用CSS的order属性，结合URL中的ID顺序，成功调整了Netlify边缘函数处理HTML时图标的显示顺序，解决了图标顺序与URL不匹配的问题，而无需修改源HTML。
🎯
关键要点
-
作者在使用Netlify边缘函数处理HTML时发现图标顺序与URL不匹配的问题。
-
HTML文档中包含多个链接，使用html-rewriter来剥离未在URL中指定的图标。
-
请求的URL可能会指定不同的图标顺序，导致显示顺序与源HTML不一致。
-
html-rewriter不提供完整的DOM解析，无法直接修改元素顺序。
-
使用CSS的order属性来调整图标的显示顺序，解决了问题。
-
通过获取URL中的ID并为每个元素设置相应的order值，实现了显示顺序的匹配。
❓
延伸问答
如何使用CSS调整HTML元素的显示顺序？
可以使用CSS的order属性，根据URL中的ID顺序为每个元素设置相应的order值，从而调整显示顺序。
Netlify边缘函数中遇到的图标顺序问题是什么？
图标顺序与请求的URL中指定的顺序不匹配，导致显示顺序与源HTML不一致。
html-rewriter在处理HTML时有什么限制？
html-rewriter不提供完整的DOM解析，无法直接修改元素的顺序，只能逐个处理元素。
如何解决图标顺序与URL不匹配的问题？
通过获取URL中的ID并为每个元素设置CSS的order属性，可以解决图标顺序不匹配的问题。
在使用html-rewriter时，如何处理未在URL中指定的图标？
可以使用html-rewriter剥离未在URL中指定的图标，只保留指定的图标。
为什么不直接修改源HTML来解决图标顺序问题？
因为html-rewriter的设计不允许直接修改源HTML，只能通过CSS调整显示顺序。
➡️
