::target-text 伪元素用来设置文字锚点的高亮状态,该功能是Chrome 89支持了基于文字内容的锚点定位。
::selection 伪元素用来设置文字被选中的高亮状态。
两者都只能修改与文字样式相关的样式,例如,颜色、背景色、下划线、文字阴影等样式。
实例如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>target-text和selection伪元素的比较用法-www.xiaoyuzl.com小鱼资料库</title> <style> ::target-text, ::selection { background-color: #16a085; color: #fff; } </style> </head> <body> <p>::target-text 伪元素用来设置文字锚点的高亮状态,该功能是Chrome 89支持了基于文字内容的锚点定位。</p> <p>::selection 伪元素用来设置文字被选中的高亮状态。</p> <p>两者都只能修改与文字样式相关的样式,例如,颜色、背景色、下划线、文字阴影等样式。</p> </body> </html>
在线展示效果:https://www.xiaoyuzl.com/plus/view-199526-1.html