Question

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

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

span {
  font-size: 200%;
}

因此，当我将标记插入另一个标记时，字体大小实际上是400％。

我的代码是否有一种简单的方法可以只更改文本的某些属性，例如背景颜色，而无需两次应用网页的样式？

编辑：

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

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

除了一个属性外，我根本不想改变他们的风格。如果我将所有内容重置为默认值，那将改变它们的样式。如果我什么都不做，那么它们的样式将被应用两次，如margin，padding，font-size等。

Answer 1

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

Answer 2

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

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

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

Answer 3

基本上，您希望CSS重置仅适用于span.highlight。这是我根据Eric Meyer受欢迎的CSS Reset：

汇总的一个

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 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>

（顺便说一句，你应该使用，semantically denotes highlighted text而不是。此外，选择比highlight更独特的类名将有助于您避免避免冲突。）

Answer 4

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

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

span {
    font-size:2rem;
}

Answer 5

您可以在其周围添加“”等标记，如果您想为其指定一个类，但是您不需要任何其他类，它会自动以黄色背景突出显示它。

如果你喜欢花哨的东西

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

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

5 个答案: