动态更改特定文本的背景颜色，而不更改其他属性

Question

我已经编写了一个chrome扩展来根据正则表达式查询在页面上查找文本。 当文本匹配时，我将匹配的文本包装在具有类highlight highlight的<span>标记中，其中highlight仅将背景颜色更改为黄色。

问题是，有时已经将样式应用于网页中的<span>标记。 例如，网页可能已定义：

span {
  font-size: 200%;
}

因此，当我将<span>标记插入另一个<span>标记时，font-size实际上是400％。

有没有一种简单的方法可以让我的代码只更改文本的某些属性，比如背景颜色，而不会两次应用网页的样式？

编辑：

似乎没有人真正了解我的目标，所以我会更加清楚。

我正在写一个chrome扩展名。 这意味着代码将在其他人的网页上运行。 我无法控制他们的风格。 我不知道他们是否会使用百分比字体大小或固定值。 我不知道他们会改变哪种风格。

除了一个属性外，我根本不想改变他们的风格。 如果我将所有内容重置为默认值，那将改变它们的样式。 如果我什么都不做，那么它们的样式将被应用两次，如边距，填充，字体大小等。

Answer 1

从我的评论和@brentonstrine将您的标签更改为：

<mark>

Answer 2

为您选择的范围提供特定的命名空间类名称

<span class="gs-text-selected">

或者其他什么，然后编写针对它的CSS。 如果遇到级联问题，可能必须在样式中添加！important，但要注意！important。

Answer 3

基本上，您需要一个仅适用于span.highlight的CSS重置。 这是我根据Eric Meyer流行的CSS重置一起扔的一个：

span.highlight {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
  display: inline;
  line-height: 1;
}

不确定是否涵盖了所有内容，但它可能会获得大部分内容。 你要碰到的问题是特异性：如果有任何具有更多特异性的CSS，（例如它使用id或者它比你使用更多的class ），那么它将被覆盖。 因此，最好的方法是将CSS内联直接插入到您创建的每个<span> ：

<span class="highlight" style="margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;display:inline;line-height:1;">found word</span>

（顺便说一句，你应该使用<mark> ，它在语义上表示突出显示的文本 ，而不是<span> 。此外，选择比highlight更独特的类名将帮助你避免，以避免冲突。）

Answer 4

您可以指定文本大小而不是使用百分比。

http://jsfiddle.net/jonocairns/3EhZx/1/

span {
    font-size:2rem;
}

Answer 5

您可以在其周围添加类似“ <mark></mark> ”的标签，如果您想为其分配一个类，但是您不需要任何其他类，它将自动以黄色背景突出显示它。

如果你喜欢花哨的东西

mark.heightlight{
  background-color:yellow;
  font-weight:bold;  
}