时间戳

首页 > 解决方案 > 如果内部文本等于字符串，则使用 CSS 更改特定元素的文本颜色

html - 如果内部文本等于字符串，则使用 CSS 更改特定元素的文本颜色

问题描述

所以我正在编辑这个 FANDOM wiki。

我在这里有这个元素：

<h1 class="page-header__title">Captain</h1>

如您所见，“Captain”将是 Wiki 中的文章名称。每篇文章都有自己的子域链接，并且会使该元素的内部文本不同。

无论如何，如果内部文本等于船长，我是否只能更改元素的 CSS？

希望你知道我想要完成什么。

这是我要完成的示例：

.edit-info-user a[href$="/wiki/User:Potato"]::Before {
    content: "( Bureaucrat ) ";
    font-size: 9px;
    color: #f00;
    letter-spacing: 0.5px;
}

如您所见，如果链接等于“/wiki/User:Potato”，这只会篡改元素的 CSS。

标签： htmlcsswiki

解决方案

你不能。您可以匹配元素、元素中属性的名称以及元素中命名属性的值。

因此，没有 javascript的唯一方法是添加data或class.

例子 ：

h1[data-text=Captain] {
  color: red
}
<h1 class="page-header__title" data-text="Captain">Captain</h1>

这是javascript的一种方式，但我不推荐它。

let title = document.querySelector('.page-header__title');


if (title.innerText === 'Captain') {
    /* if you want to edit directly its style */
    title.style.color = 'red';
    /* if you want a class */
    title.classList.add('.your-class');
}
<h1 class="page-header__title">Captain</h1>

推荐阅读