将 div 标签注入每个 <a> 链接

Question

我正在开发浏览器扩展程序，该扩展程序使用注入的 javascript 在每个链接下方显示一些信息。我想使用带有小图标和标签的颜色 div 块。问题是某些页面会覆盖我注入的元素的默认 CSS 样式，也不确定所有块的位置是否正确（在它们的链接下方）。我正在使用 Chrome。有什么建议可以用于任何页面标记吗？

Answer 1

为您需要的每个样式规则添加 !important 样式（甚至是默认值）。
这将覆盖页面所做的任何事情。

Answer 2

!important 在我看来是最后的手段。

我首先建议如下：

1. 为 div 标签添加不同的 CSS 类，这样其他 CSS 文件就无法覆盖它。示例：yourextensionname-label 可以是 div 标签的类名。
2. 最后加载您的 CSS 文件。
3. 如果上述方法失败，请使用内联样式。

Answer 3

您的一些问题可能是因为您将块元素放在内联元素中，这可能会被踢出到自己的元素中，而不是呈现在您想要的位置。

1) 如果您不担心旧版浏览器 (ie6/ie7)，您可以将链接样式设置为“display:inline-block;”。这将允许您在其中存储其他块元素。您可以在其中注入较小的 div/图像。

2) 根据您的布局，您可以将链接显示设置为阻止，然后将链接浮动到左侧以获得类似的效果，但如果它们位于常规文本块中，则效果不佳。

3) 最后，您可能必须使用 javascript 将 div 绝对定位在链接下方。

更新：

我第一次阅读问题时错过了浏览器扩展部分。您应该设置非常具体的 css 变量，并且可能使用绝对定位。您可能必须使用 !important，但只有当您确定您的样式不会溢出到原始页面内容上时才应该这样做。