基於內容的 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 示範了腳本的效果：

SpecificWord
OtherWords

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