如何 CSS 根据内容而不是属性定位行

Question

我使用的软件在 naming/targeting 中不是很具体。我正在尝试定位包含标签兴趣的行。我无法添加新的 classes.

这太有效了：

.resultsList .row:nth-child(2) {color:red;}

然后红色文本会出现在使用 .resultsList 的网站上的任何位置。我需要专门针对只有具有兴趣的结果标签，如下所示：

<div class="row">
<div class="result-label col-tn-3">Interests</div>
<div class="result-value col-tn-9">Sailing</div>
</div>

有什么帮助吗？我试过使用兴趣上的整个 class 进行定位，但我也将其他不是兴趣的行变成了红色。我也许可以使用普通的 Javascript，但 CSS 会更好。

谢谢。

Answer 1

我想我没有正确理解这个案例，但你只想用红色文本显示那些有兴趣的标签，对吧？如果是这样，为什么不能简单地创建一个新的 class（例如 interest-label）并在其中输入 color: red？然后对于您想要的标签，您只需添加 class="interest-label".

.resultsList .row:nth-child(2) {color:red;}

您编写的 css 会将红色应用到 .resultsList 的所有元素以及具有 class resultsList.

的元素内行的第二个子元素

你能分享更多你的代码吗and/or再详细说明你想以什么结尾？

Answer 2

在Jquery！ (.result-label 是你的目标 element/s class)

$(".resultsList .result-label").css("color", "red");

在原版 JS 中！

document.querySelector(".resultsList .result-label").style.color = "red";

在CSS!

.resultsList .result-label {color:red }

How to CSS target a row based upon its content, not attributes