Ketahui tentang ciri baharu dalam CSS3::pemilih teks sasaran dalam satu artikel

Artikel ini akan memberi anda pemahaman yang mendalam tentang ciri baharu dalam CSS3::target-text selector, dan bercakap tentang fungsi dan penggunaan pemilih ini, saya harap ia akan membantu semua orang.

Saya baru-baru ini melihat pemilih yang tidak pernah saya lihat sebelum ini di tapak web rasmi MDN, ::target-text.

Setelah membuat kajian ringkas, saya mendapati ia menarik dan berguna, jadi saya akan kongsikan sekarang. [Pembelajaran yang disyorkan: tutorial video css]

1 Apakah yang dilakukan oleh ::target-text

Saya percaya semua orang telah menggunakannya Pemilih ini boleh memadankan kandungan pada halaman dengan mudah daripada URL dan melaksanakan penentududukan berlabuh. Sebagai contoh, kita sering melihat :target

seperti ini dalam direktori dokumen Walau bagaimanapun,

mesti memerlukan halaman mengandungi :target sebagai elemen sasaran tidak wujud, tidak ada cara untuk mencarinya. Untuk menyelesaikan masalah ini, id muncul! ::target-text

Secara literal,

::target-text bermaksud pemilih "teks utama". Penerangan pada MDN rasmi ialah:

Jika penyemak imbas menyokong ciri

tatal ke serpihan teks, ia akan menatal ke lokasi bahagian teks ini dan membenarkan pengguna untuk sesuaikan ketinggian. Serlahkan bahagian gaya teks ini.

Apakah maksudnya di sini ialah contoh rasmi

demo tatal ke teks

Anda boleh melihatnya? dengan mengklik ini Selepas memaut, penyemak imbas secara automatik melompat ke serpihan teks yang ditentukan, dan teks akan mempunyai gaya yang diserlahkan (latar belakang ungu dalam gambar, teks putih).

Jadi,

boleh digunakan untuk menyesuaikan gaya bahagian ini::target-text

::target-text {
  background-color: rebeccapurple;
  color: white;
}

Walau bagaimanapun, gaya yang disokong agak terhad, serupa dengan

dan hanya berkaitan teks gaya disokong::selection

2 Bagaimana untuk menentukan kedudukan lompatan

Kita semua tahu bahawa

dipadankan dengan menyatakan :target tambah id pada URL, sebagai berikut#

http://www.example.com/index.html#section2

<section id="section2">Example</section>

Kembali kepada contoh tadi, anda dapat melihat bahawa pautan lompat kelihatan seperti ini

Anda juga boleh melihatnya

mempunyai peraturan yang sepadan, seperti berikut::target-text

http://www.example.com/index.html#:~:text=textStart

di sini mewakili kandungan teks dalam halaman yang perlu dilompat. Walau bagaimanapun, perlu diingatkan bahawa jika beberapa keping teks boleh dipadankan, teks padanan pertama akan ditempatkan (serupa dengan id). textStart

3. Cara meletakkan kedudukan yang tepat

Hanya menyatakan sekeping teks dengan mudah boleh mengakibatkan kedudukan yang tidak tepat (terlalu mudah untuk diulang). Untuk menyelesaikan masalah ini, terdapat dua penyelesaian

Nyatakan sepanjang mungkin teks supaya tidak berulang
1. Tambahkan sekatan sebelum dan selepas teks, seperti watak titik permulaan

Walaupun pilihan satu boleh dilaksanakan, ia juga mempunyai masalah Pertama, bar alamat terlalu panjang dan tidak begitu cantik tetapi saya hanya perlu berkongsi kandungan kecil ini, tidak sekian. Sekarang lihat pilihan dua. Berikut ialah pengenalan ringkas kepada sintaks lengkap

:~:text

#:~:text=[prefix-,]textStart[,textEnd][,-suffix]

teks awalan- awalan
• teks Mula teks mula
• teksTamat teks akhir
-teks akhiran akhiran

Dari segi tatabahasa, hanya textStart diperlukan, yang lain adalah pilihan. Bagaimana cara menggunakannya? Katakan kita ingin mencari teks ini (tidak termasuk tanda baca pertama dan terakhir)

boleh menentukan terus aksara permulaan,

Mlle,parachute

#:~:text=Mlle,parachute

Anda boleh layari pautan ini https://mdn.github.io/css-examples/target-text/index.html#:~:text=Mlle,payung terjun

Kesannya adalah seperti berikut

可以看到定位区域在第一个parachute处就结束了，并没有定位到后面的。这时可以继续限制一下，比如把后面的.加进来，作为后缀

#:~:text=Mlle,parachute,-.

可以访问这个链接 https://mdn.github.io/css-examples/target-text/index.html#:~:text=Mlle,parachute,-.

效果如下

这样就能精准的定位到想要的内容了

四、浏览器行为和兼容性

虽然有上面的语法，但实际上浏览器已经内置了快捷操作。选中一段文本，右键会出现这样的菜单，有一个“复制指向突出显示的内容的链接”选项（Edge浏览器提示略有不同），如下

点击这个会自动复制一段包含#:~:text=的链接，浏览器会自动处理选中文本的前后限制，保证结果的唯一性。如下，将刚才复制的地址直接粘贴在浏览器打开

然后说一下兼容性。

这个属性非常新，可以在 MDN 官网看到具体的兼容信息，需要 Chrome 89+ 以上才行

试了一下安卓系统上也是没有问题的，比如在微信中打开的效果如下

默认是一个黄色背景（貌似无法自定义），点击任意地方就消失了。

比较适合在阅读一本书时，想分享某一章节的某一小段精彩文本给他人，这样就能快速定位到分享的地方了，还能高亮显示。是不是很方便呢？

五、简单总结一下

详细通过本文，应该可以了解到::target-text是什么了吧？下面简单总结一下

• ::target-text 和 :target 类似，都可以跳转到指定位置

• ::target-text 无需 id，可以指定任意文本

• 地址栏匹配规则是 #:~:text=[prefix-,] textStart [,textEnd] [,-suffix]，只有 textStart 是必填，其他都是可选

• 浏览器支持“复制指向突出显示的内容的链接”操作，可以不必手动拼接

• 兼容性有点差，安卓用户可以使用

当然这本身是一个渐进增强的属性，能够支持体验更好，不支持也没什么大事。最后，如果觉得还不错，对你有帮助的话，欢迎点赞、收藏、转发！

（学习视频分享：web前端）

Atas ialah kandungan terperinci Ketahui tentang ciri baharu dalam CSS3::pemilih teks sasaran dalam satu artikel. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!