如何覆盖没有类或ID的html

Question

我正在尝试覆盖CSS属性，该属性使我无法将div中的图表居中。

我看到了很多关于这些的文章，但是没有导入图表。

我要居中的图表来自google可视化API，但是我应该能够仅使用HTML和CSS来解决这个问题。

由于图表来自Google，因此我需要覆盖一些代码，特别是具有position: relative

的div

在检查器中，我可以取消选中position: relative和图表中心。

问题是，我没有编写该代码，当我尝试像这样重写它时：

    #electricalLineChart div div{
    position: static!important 
    } 

它仍然偏爱原始位置。

这是CSS：

#electricalLineChart{
width: 80%;
margin: auto;
}

这是html：

<div style="overflow-x:auto;">
<table class="container">
    <tbody id="electrical-tables">
          <tr id="odd-cells">
          <td><div id="electricalLineChart"></div></td>
          </tr>
    </tbody>
</table>
</div>

我无法在HTML中使用align= "center"，因为它破坏了图表的功能。

Answer 1

我认为您还有其他问题，因为在元素上设置position: relative不会影响设置宽度和边距自动设置。

但是，您可能需要提高CSS选择器的特异性以覆盖传入的CSS。我将使用开发工具检查该元素，并显示一个 Full CSS选择器的副本。然后，您需要添加到层次结构的标签。通常，您可以通过在主体上添加ID来实现此目的。

 #electricalLineChart div div{
    position: static!important 
    } 

应该变成类似

 #mySite #electricalLineChart div div{
    position: static !important; 
    } 

这使您的规则比传入的CSS更具体，因此您的规则将获胜。

还要确保在值和！之间有一个空格。以及ASA ;最后。

Answer 2

因此停止尝试覆盖内容，因为它没有用，而实际上只是尝试了

#electricalLineChart{
display: flex;
justify-content: center;
}

它现在可以工作了。 有时我只是讨厌CSS。