将div标签注入每个<a> link</a>

Question

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

Answer 1

在我看来，重要的是最后的手段。

我首先建议如下：

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

Answer 2

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

Answer 3

你的一些问题可能是因为你将块元素放在一个内联元素中，它可以被踢出自己的元素而不是你想要的地方。

1）如果您不担心旧浏览器（ie6 / ie7），可以将链接样式设置为“display：inline-block;”。这将允许您在其中存储其他块元素。你可以在里面注入较小的div / images。

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

3）最后，您可能必须使用javascript将div放在链接下方。

<强>更新

我第一次读这个问题时错过了浏览器扩展部分。你应该设置非常具体的css变量，并且可能使用绝对定位。您可能必须使用！important，但只有在您确定您的样式不会渗透到原始页面内容时才会发生这种情况。