Как переопределить HTML без класса или ID

Question

Я пытаюсь переопределить атрибут CSS, который мешает мне центрировать диаграмму, находящуюся в div.

Я видел много постов на них, но не с импортированием диаграммы.

Диаграмма, которую я пытаюсь центрировать, основана на API визуализации Google, но я смогу решить эту проблему только с помощью HTML и CSS.

Поскольку диаграмма исходит от Google, есть некоторый код, который мне нужно переопределить, в частности, div с position: relative

В инспекторе я могу снять отметку 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>

Я НЕ МОГУ использовать align= "center" в HTML, потому что это разрушает функциональность моей диаграммы.

Answer 1

Так что перестал пытаться переопределить материал, потому что он не работал и буквально просто попытался

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

И это работает сейчас. Иногда я просто ненавижу CSS.

Answer 2

Я думаю, что у вас есть другие проблемы, поскольку на настройку ширины и полей не должно влиять наличие position: relative для элемента.

Но вам, вероятно, нужно увеличить специфичность селектора CSS, чтобы переопределить входящий CSS. Я бы осмотрел элемент с помощью инструментов разработчика и скопировал CSS-селектор FULL , который он отображает. Затем вам нужно ДОБАВИТЬ тег в иерархию. Обычно это можно сделать, добавив идентификатор к телу.

 #electricalLineChart div div{
    position: static!important 
    } 

должно стать чем-то вроде

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

Это делает ваше правило более конкретным, чем входящий CSS, поэтому ваше правило победит.

Также убедитесь, что у вас есть пробел между значением и! также как и ; в конце.