我正在开发一个浏览器脚本，该脚本扫描页面以查找关键字，突出显示它们，当用户将鼠标悬停在它们上时 - 创建一个使用 AJAX 和 PHP 填充的工具提示。我遇到的唯一问题是显示工具提示的网站的 CSS 干扰了工具提示内容的 CSS。
工具提示使用<img>、<p>和<table> <tr>和<td>。我的PHP文件用我在CSS文件中设置样式的ID回显这些元素。我的CSS在某些网站（如维基百科）上可以正确显示，但其他网站会弄乱填充/边距/对齐方式。例如，某些网站可能<td>中心对齐，而我希望它左对齐。我已经在所使用的许多ID中添加了"！important"。
问：如何防止网站的 CSS 干扰工具提示的样式？
您可以
做的一件事是为工具提示容器使用id。
您只需要记住，id必须是独一无二的。因此，页面上不得有两个工具提示。
<div id="my-tooltip-2986234">
the content of the tooltip
</div>
然后，对于您的css文件，您可以创建如下内容：
#my-tooltip-2986234 * {
/*reset all style properties here (you can take this of a css reset script)*/
}
由于id a 具有更高的权重，因此在没有id的情况下规则，这应该会覆盖工具提示容器内外部页面的所有样式。
您还需要在工具提示的所有规则前面加上该id。
#my-tooltip-2986234 a {
/*style for your a*/
}
您确实可能仍然对外国网站的!important规则有问题。但是，以这种方式创建样式代码可以最大程度地减少冲突。您仍然可以考虑将!important规则添加到您的规则中。但至少对于我创建的东西来说，在规则前面加上id就足够了。
另一种解决方案（但不像上面的解决方案那么优雅）是创建一个iframe容器，您可以在其中写入内容。这样，您就可以完全沙盒化您的 css 规则。但是因为我很长时间没有使用iframe，我现在不知道各种浏览器中的陷阱在哪里（您需要创建一个没有src的iframe，因为跨域策略，这曾经在某些浏览器中导致问题）。