I've written a chrome extension to find text on a page based on a regex query. When text is matched, I wrap the matched text in a <span> tag that has the class highlight where highlight only changes the background color to yellow.

The issue is that sometimes there are already styles applied to <span> tags in a webpage. For example, the webpage might have this defined:

span {
  font-size: 200%;
}

So when I insert my <span> tag in another <span> tag, the font-size is actually 400%.

Is there an easy way for my code to just change certain properties of the text, like the background color, without applying the webpage's styles twice?