首頁  >  文章  >  web前端  >  我可以使用 CSS 根據錨點的內容來設定錨點樣式嗎?

我可以使用 CSS 根據錨點的內容來設定錨點樣式嗎?

Linda Hamilton
Linda Hamilton原創
2024-11-21 08:26:13531瀏覽

Can I Style Anchors Based on their Content Using CSS?

基於內容的 CSS 規則

CSS 可以用來對包含特定單字的錨點套用不同的樣式嗎?

答案

不幸的是,純 CSS 並沒有提供基於內容的樣式元素的本機解決方案。提議的「:contains」選擇器不是目前 CSS3 選擇器工作草案的一部分。

JavaScript 解決方法

要實作此功能,可以使用 JavaScript。例如,以下程式碼片段會迭代文件中的所有鏈接,並將紅色應用於內容與字串“SpecificWord”匹配的任何錨點:

Array.from(document.links).forEach(link => {
  if (/\bSpecificWord\b/i.test(link.innerHTML)) {
    link.style.color = 'red';
  }
});

此範例HTML 演示了腳本的效果:

<a href="#">SpecificWord</a>
<a href="#">OtherWords</a>

執行後,第一個錨點將採用紅色樣式,而第二個錨點將保留其預設樣式。

以上是我可以使用 CSS 根據錨點的內容來設定錨點樣式嗎?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn