1

我开发了一个将 div 附加到当前页面的 JavaScript 书签。

但问题是，当由于页面的原始 CSS 代码（Bookmarklet 也有自己的 CSS）而加载 div 及其内容时，我的 div 的外观会损坏。

我的意思是，在每一页上，一些元素看起来不同（有时是标签的高度，有时是 textarea 的背景色等）

有没有办法纠正你知道的这个错误？它可以是 CSS 或 JavaScript 解决方案。

4

3 回答 3

2

有什么方法可以纠正你知道的这个错误吗？

是的，在 DIV 中定义每个相关属性，并且!important：

<div style="width: 300px !important; line-height: 1em !important....">

没有其他完美的故障安全方式。我见过的所有外部小部件都是这样做的。

于 2011-01-30T21:02:32.680 回答
2

听起来您所说的是页面的 CSS 会覆盖您注入的内容的默认样式。这可能是由于以下两件事之一：没有为您的内容指定每个样式属性（并使用相对值），或者您的特异性不够高。

指定每个样式属性

假设您的内容如下所示：

<div id="#cool-bookmarklet">Here is some content</div>

你的 CSS 看起来像这样：

#cool-bookmarklet {
    color: #000000;
    font-size: 80%;
}

以上有两个问题。只声明了两个样式属性，因此每个其他属性都将从其他样式继承。如果页面有这样的 CSS 怎么办？

div {
    width: 70%;
    background-color: #000000;
}

您会遇到问题，因为 CSS 适用于您的内容（div）。您的 div 'cool-bookmarklet' 将是其父级宽度的 70%，并且具有黑色背景色。不好。

此外，字体大小是一个相对值，这意味着它将是继承值的 80%。所以如果页面指定的font-size是10px，你的字体就是8px。在这里最好使用显式大小来避免继承样式的任何问题。

这是您的 CSS 应该如何避免继承样式：

#cool-bookmarklet {
    color: #000000;
    font-size: 12px;
    width: 400px;
    background-color: #ffffff;
    margin: 0;
    padding: 0;
    font-weight: normal;
    /* etc, etc */
}

特异性

CSS 有一部分是很多人没有学过的（我花了一段时间才理解），它被称为特异性。浏览器使用特异性来确定当两个选择器冲突时将哪些 CSS 样式应用于元素。

从 CSS 规范：

选择器的特异性计算如下（来自规范）：

  • 如果声明来自 'style' 属性而不是带有选择器的规则，则计数 1，否则为 0 (= a) （在 HTML 中，元素的“style”属性的值是样式表规则。这些规则没有选择器，所以 a=1、b=0、c=0 和 d=0。）
  • 统计选择器中ID属性的个数（=b）
  • 统计选择器中其他属性和伪类的数量（=c）
  • 统计选择器中元素名和伪元素的个数（=d）

连接四个数字 abcd（在具有大基数的数字系统中）给出了特异性。

所以 a = html 元素的样式属性中的样式。b = id 选择器，c = 类名和属性，d = 标签名。如果两个选择器针对同一个元素，则具有最高特异性的选择器“获胜”。

这有点令人困惑，但经过几次尝试你就会掌握它的窍门。

假设您的 CSS 中有以下两条规则：

#cool-bookmarklet { color: red; }
div { color: blue; }

和内容：

<div id="cool-bookmarklet">Here is some content</div>

选择器“#cool-bookmarklet”的特异性为 100（a=0，b=1，c=0，d=0）。选择器“div”的特异性为 1（a=0，b=0，c=0，d=1）。'#cool-bookmarklet' 将获胜，并且 div 将显示红色文本。

这是相关的，因为如果您的书签注入样式表来设置您的内容的样式，那么如果特异性更高，页面上的其他 CSS 可能会覆盖它。为您的内容提供一个 ID（具有高特异性“b”）通常是最简单的。这使您可以定位您的内容，而不必担心覆盖其他样式。

希望有帮助！

于 2011-01-30T21:32:40.133 回答
0

我不完全理解这个问题。也许一个小片段会有所帮助？

如果您担心现有样式可能会覆盖您正在动态添加的元素上的样式，您可以添加!important标签。但是，如果样式是内联的（小书签总是会发生这种情况），则不需要这样做。

于 2011-01-30T21:04:23.563 回答