Javascript 工具栏插件 CSS 继承

Question

<分区>

Answer 1

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

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

规则 1

table tbody td span{ font-weight: bold; }

规则 2

table span{ font-weight: normal; }

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

要获得快速解释，请查看 htmldog 的 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 规则，但这会使您成为一个坏人并且不被信任。实际上，它只是增加了使您的代码变得难以处理的巨大风险，但这是一回事。