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

Question

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

我这里有这个元素：

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

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

如果内部文本等于 Captain，我是否只能简单地更改元素的 CSS？

希望你知道我想要完成的事情。

这是我要完成的示例：

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

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

Answer 1

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

所以在没有 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>

Answer 2

您可以尝试将 classList 添加到具有匹配 class 的所需元素中，并确保使用您想要的 [=12= 设计创建此 class ] 文件。

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

Changing a specific element's text color using CSS if the inner text equals a string

html

css

wiki