Bienvenido a mi cuenta pública: detective front-end
Recientemente vi un selector que nunca antes había visto en el sitio web oficial de MDN,::texto-objetivo。
Después de una breve investigación, creo que es un poco interesante y práctico, así que lo compartiré ahora.
1. ¿Qué hace ::target-text?
Todos deben haber usado :targeteste selector, que puede hacer coincidir fácilmente el contenido de la página desde la URL y lograr un posicionamiento de anclaje. Por ejemplo, a menudo veo esto en el directorio de documentos.
Sin embargo, :targetse debe exigir que la página contenga idel elemento que es el objetivo, y si no existe, no hay forma de localizarlo. ¡ Para resolver este problema, ::target-textapareció!
Literalmente, ::target-text significa el selector de "texto ancla". La descripción en el MDN oficial es:
Si el navegador admite la función de desplazamiento a un fragmento de texto , se desplazará hasta el lugar donde se encuentra esta parte del texto y permitirá al usuario personalizar el estilo de resaltar esta parte del texto.
¿Qué quieres decir, aquí hay un ejemplo oficial?demostración de desplazamiento a texto
Puede ver que después de hacer clic en este enlace, el navegador salta automáticamente al fragmento de texto especificado y el texto tendrá un estilo resaltado (fondo morado en la figura, texto blanco).
Por lo tanto, ::target-textse puede utilizar para personalizar el estilo de esta parte .
::target-text {
background-color: rebeccapurple;
color: white;
}
复制代码Sin embargo, los estilos admitidos son relativamente limitados y ::selectioncasi solo se admiten estilos relacionados con el texto.
2. Cómo especificar la posición de salto
Todos sabemos que la coincidencia :targetse realiza especificando #una identificación en la URL, de la siguiente manera
http://www.example.com/index.html#section2
<section id="section2">Example</section>
复制代码Volviendo al ejemplo de ahora, puedes ver que el enlace de salto es así
Como puede ver, ::target-text también hay reglas correspondientes, de la siguiente manera
http://www.example.com/index.html#:~:text=textStart
复制代码这里的textStart就是表示页面中需要跳转的文本内容。不过需要注意的是，如果有多段文本都能够匹配，那么会定位到第一个相匹配的文本（和 id 有点类似）。
三、如何精准的定位
单纯的指定一小段文本，很容易出现定位不准的情况（太容易重复了）。为了解决这个问题，有两个方案
- 尽量指定长的文本，这样就不会重复了
- 在文本前后加上限制，比如起始点字符
方案一虽然可行，但是也有问题，一是地址栏太长，不太美观，而是我只需要分享这一小段内容出去，不需要那么多。现在看下方案二。这里简单介绍下:~:text的完整语法
#:~:text=[prefix-,]textStart[,textEnd][,-suffix]
复制代码- prefix- 前缀文本
- textStart 文本开始
- textEnd 文本结束
- -suffix 后缀文本
从语法上，只有 textStart 是必填，其他都是可选。怎么用的呢？假设我们想定位这一段文本（不包含首尾标点）
可以直接指定起始字符，Mlle,parachute
#:~:text=Mlle,parachute
复制代码可以访问这个链接 mdn.github.io/css-example…
效果如下
可以看到定位区域在第一个parachute处就结束了，并没有定位到后面的。这时可以继续限制一下，比如把后面的.加进来，作为后缀
#:~:text=Mlle,parachute,-.
复制代码可以访问这个链接 mdn.github.io/css-example…
效果如下
这样就能精准的定位到想要的内容了
四、浏览器行为和兼容性
虽然有上面的语法，但实际上浏览器已经内置了快捷操作。选中一段文本，右键会出现这样的菜单，有一个“复制指向突出显示的内容的链接”选项（Edge浏览器提示略有不同），如下
点击这个会自动复制一段包含#:~:text=的链接，浏览器会自动处理选中文本的前后限制，保证结果的唯一性。如下，将刚才复制的地址直接粘贴在浏览器打开
然后说一下兼容性。
这个属性非常新，可以在 MDN 官网看到具体的兼容信息，需要 Chrome 89+ 以上才行
试了一下安卓系统上也是没有问题的，比如在微信中打开的效果如下
默认是一个黄色背景（貌似无法自定义），点击任意地方就消失了。
Es más adecuado cuando lee un libro y desea compartir un pequeño fragmento de texto maravilloso de un capítulo determinado con otras personas, para que pueda ubicar rápidamente el lugar para compartirlo y resaltarlo. ¿Es muy conveniente?
Cinco, un breve resumen
A través de este artículo, deberías poder entender de ::target-textqué se trata, ¿verdad? A continuación se muestra un breve resumen
- ::target-text es similar a :target, ambos pueden saltar a la posición especificada
- ::target-text No se necesita identificación, se puede especificar cualquier texto
- La regla de coincidencia de la barra de direcciones es #:~:text=[prefix-,] textStart [,textEnd] [,-suffix], solo se requiere textStart, los demás son opcionales
- El navegador admite la operación "Copiar enlace al contenido resaltado", lo que elimina la necesidad de unir manualmente
- La compatibilidad es un poco pobre, los usuarios de Android pueden usarla
Por supuesto, esta es una propiedad de mejora progresiva en sí misma, puede soportar mejor la experiencia y no es gran cosa si no es compatible. Finalmente, si crees que es bueno y útil para ti, dale me gusta, marca y reenvía ❤❤❤
Bienvenido a mi cuenta pública: detective front-end