Question

我正在创建一个Chrome扩展程序，该扩展程序将注入一些HTML，以在用户突出显示的文本位置显示弹出式窗口叠加层。它可以在大多数网站上正常工作，但是在某些网站（特别是ESPN）上，我编写的叠加CSS被默认网站CSS覆盖。

我为我的每个元素创建了id标签，以具有更特定的CSS选择器，但在视觉上没有任何变化。我也尝试过使用！important，尽管这是一种不好的做法，但这也没有影响任何事情。

这是我用于创建叠加层的代码：

function setupOverlay() {
  overlayDOM = document.createElement("div");
  overlayDOM.setAttribute("id", "selection_overlay");
  statsTable = document.createElement("table");
  statsTable.setAttribute("id", "selection_table");
  overlayDOM.appendChild(statsTable);
  document.body.appendChild(overlayDOM);
}

这是叠加层CSS的一部分：

#selection_overlay {
  visibility: hidden;
  position: absolute;
  z-index: 2147483647;
  top: 0;
  left: 0;
  border: solid 2px;
  border-color: #808080;
  border-radius: 5px;
  box-shadow: 0px 0px 2px 2px #404040;
  padding: 5px 0px 5px 0px;
  background-color: rgba(75, 75, 75, 0.95);
}

#selection_table {
  border-collapse: collapse;
  border-radius: 5px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 16px;
  text-align: center;
  color: #FFFFFF;
}

Answer 1

ESPN似乎使用了一些会影响表元素的样式：

table td:first-child {
    text-align: left;
}
table td {
    color: #48494a;
    font-size: 12px;
    font-weight: 400;
    height: 28px;
    line-height: 1.2;
    padding: 1px 4px 0 4px;
    margin: 0;
    text-transform: none;
    white-space: nowrap;

}
table th, table td {
    text-align: right;
}

由于未明确调用您的Table子元素，因此这可能是覆盖您的设置的原因。我建议专门设置所有元素的样式，例如：

#selection_table td {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    text-align: center;
    color: #FFFFFF;
}

如何防止HTML div注入被网站CSS覆盖？

1 个答案: