1

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

问题是有时已经有样式应用于<span>网页中的标签。例如，网页可能定义了以下内容：

span {
  font-size: 200%;
}

所以当我将我<span>的标签插入另一个<span>标签时，字体大小实际上是 400%。

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

编辑：

似乎没有人真正理解我在说什么，所以我会尽量说得更清楚。

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

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

4

5 回答 5

3

根据我的评论和@brentonsrine 将您的标签更改为：

<mark>

于 2013-07-01T23:24:57.623 回答
0

基本上，您需要一个仅适用于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 具有更多特异性（例如，它使用 anid或它使用的classes 比您多），那么它将被覆盖。因此，最好的方法是将 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，以避免冲突。）

于 2013-07-01T23:03:56.780 回答
0

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

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

span {
    font-size:2rem;
}
于 2013-07-01T23:07:34.460 回答
0

为您选择的跨度提供特定的命名空间类名，例如

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

或其他什么，然后编写针对该目标的 CSS。如果遇到级联问题，您可能必须在样式中添加 !important，但要小心使用 !important。

于 2013-07-01T22:59:27.540 回答
0

你可以在它周围添加像“”这样的标签<mark></mark>，如果你喜欢给它分配一个类，但你不需要任何额外的类，它会自动用黄色背景突出显示它。

如果你喜欢花哨的东西

mark.heightlight{
  background-color:yellow;
  font-weight:bold;  
}
于 2013-07-01T23:46:30.600 回答