我可以使用 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中文网其他相关文章！