Chrome扩展仅在具有特定内容的类上注入css [重复]答案

【问题标题】：Chrome extension injecting css only on classes with specific content [duplicate]Chrome扩展仅在具有特定内容的类上注入css [重复]
【发布时间】：2017-06-22 00:49:52
【问题描述】：

我知道如何将 CSS 注入网页并更改某个类，但如果我不想更改所有该类怎么办？

例如，假设我有一个 div：

<div class="content">
   <p> My favorite color is yellow </p>
</div>
<div class="content">
   <p> My favorite color is green </p>
</div>

我想使用内容脚本来编辑 .content 类的 CSS，但只编辑包含关键字 "green" 的 CSS

我是否必须使用 Javascript，如果是，我该怎么做？

【问题讨论】：

标签： javascript html css google-chrome google-chrome-extension

【解决方案1】：

如果您愿意使用 jQuery，可以使用 :contains() selector。

示例

$(".content:contains('green')").css("color", "green");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content">
  <p>My favorite color is yellow</p>
</div>
<div class="content">
  <p>My favorite color is green</p>
</div>

【讨论】：

【解决方案2】：

或者像下面这样简单

var item = $('.content');
  for (var i = 0; i <= item.length; i++) {
   if ($(item[i]).text().indexOf("green")>= 0) {
         $(item[i]).css('color','red');
      }
  }

【讨论】：