1

我已经构建了一个小的 javascript 插件，可以通过单击浏览器工具栏上的相关按钮来访问它。

在某些站点上它运行良好，但在其他站点上它看起来很糟糕，主要是因为它从父页面获取 CSS 样式。

在构建工具栏插件时，我可以做些什么/遵循规则，以防止我的工具从浏览器页面继承样式。

4

1 回答 1

1

起作用的现象是css 继承。您添加到页面的所有内容都将根据该页面的 css 设置样式。您需要使用类来使您添加的元素的 css 比从页面自己的 css 应用到它的其他规则更具体。

您的新元素的 CSS 规则需要比适用于它的其他规则更具体。有点像口语，具体意味着更详细地指代某事。

规则1

表 tbody td span{ 字体粗细：粗体；}

规则 2

表跨度{字体粗细：正常；}

在这种情况下，规则 1 将“胜过”规则 2，因为它更具体。

如需快速解释，请查看 htmldog's page on css specificty

您想清除任何进入的样式的 css，然后再次添加它们。假设它全部在一个带有 class="jibber-nav" 的 div 中

你可以这样做：

.jibber-nav,
.jibber-nav ul,
.jibber-nav li,
.jibber-nav a{
  background: none;
  color: #000;
  font-family: sans-serif;
  padding: 0;
  margin: 0;
}

/**** then add style you want *******/

.jibber-nav li{
  border: 2px solid #123456;
  border: radius: 4px;
}

.jibber-nav a{
  color: #097654;
}

如果所有其他方法都失败了，您可以将!important附加到您的所有 CSS 规则中，但这会使您成为一个坏人并且不值得信任。实际上，它只会增加使您的代码难以使用的风险，但这是同一回事。

于 2013-03-01T11:51:32.823 回答