Question

我开发了一个JavaScript Bookmarklet，它将div附加到当前页面。

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

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

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

Answer 1

有没有办法纠正你所知道的这个错误？

是，定义DIV内的所有相关属性和!important：

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

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

Answer 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'酷书签'将是其父级宽度的70％，并具有黑色背景色。不好。

此外，font-size是一个相对值，这意味着它将是继承值的80％。因此，如果页面指定的字体大小为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规范：

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


如果声明来自的是1是“样式”属性而不是带有选择器的规则，则计数1，否则为0（= a）（在HTML中，元素的“样式”属性的值是样式表规则。这些规则具有没有选择器，所以a = 1，b = 0，c = 0，d = 0.）

计算选择器中的ID属性数（= b）

计算选择器（= c）
中其他属性和伪类的数量
计算选择器中元素名称和伪元素的数量（= d）


连接四个数字a-b-c-d（在具有大碱基的数字系统中）给出了特异性。

所以a = = html元素的style属性中的样式。 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'）通常是最容易的。这使您可以定位您的内容，而不必担心其他样式覆盖。

希望有所帮助！

Answer 3

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

如果您担心现有样式可能会覆盖您要动态添加的元素的样式，则可以添加!important标记。但是如果样式是内联的（这通常是使用bookmarklet的话），那就不需要了。

附加控件的CSS

3 个答案: