CSS scroll-target-group加:target-current滚动菜单自动高亮
💡
原文中文，约3000字，阅读约需7分钟。
📝
内容提要
本文介绍了CSS的scroll-target-group属性和:target-current伪类，能够实现滚动时菜单项自动高亮的效果。用户可以通过简单的HTML和CSS代码轻松实现这一功能。该特性在Chrome 140及以上版本支持，展示了CSS在前端交互中的潜力，可能减少对JavaScript的依赖。
🎯
关键要点
- CSS的scroll-target-group属性和:target-current伪类可以实现滚动时菜单项自动高亮的效果。
- 该特性在Chrome 140及以上版本支持，展示了CSS在前端交互中的潜力。
- 实现该效果的HTML和CSS代码非常简单，只需设置scroll-target-group:auto和:target-current样式。
- scroll-target-group属性允许锚点元素具有类似于::scroll-marker伪元素的特性。
- :target-current伪类支持较早，能够基于滚动位置匹配锚点元素。
- CSS的这些新特性可能减少对JavaScript的依赖，未来可能会改变前端开发的方式。
❓
延伸问答
CSS的scroll-target-group属性有什么作用？
scroll-target-group属性可以实现滚动时菜单项自动高亮的效果。
:target-current伪类如何使用？
:target-current伪类用于基于滚动位置匹配锚点元素，并可以设置高亮样式。
这个特性在哪些浏览器版本中支持？
该特性在Chrome 140及以上版本支持。
如何实现菜单项的自动高亮效果？
只需在菜单容器设置scroll-target-group:auto，并在链接元素使用:target-current样式。
scroll-target-group属性与::scroll-marker有什么关系？
scroll-target-group属性允许锚点元素具有类似于::scroll-marker伪元素的特性。
CSS的新特性会对前端开发产生什么影响？
这些新特性可能减少对JavaScript的依赖，改变前端开发的方式。
➡️
