如何用 querySelector 覆盖 querySelectorAll 中的 header？

Question

我正在使用 datepicker-dialog.css 并且我有一个 querySelectorAll 在 (.datepicker) 中检索 header。 然而 the.datepicker 有一个使用 display:flex 的 header； 这打破了垂直而不是水平显示日期的日历。

内部 datepicker-dialog.css

.datepicker-dialog .header {
  cursor: default;
  background-color: white;
  padding: 7px;
  font-weight: bold;
  text-transform: uppercase;
  color: black;
  display: flex;
  justify-content: space-around;
}

在我的 index.html

<script>
    // Initialize the Datepicker-Dialog objects
    document.querySelectorAll('.datepicker').forEach(function (dp) { new DatePickerDialog(dp); });
</script>

我不想直接更改 class，因为它正在其他地方使用，所以我尝试在 datepicker-dialog.css 中添加一个新的 class 并调用 querySelector。

<script>
    // Initialize the Datepicker-Dialog objects
    document.querySelectorAll('.datepicker').forEach(function (dp) { new DatePickerDialog(dp); });
    document.querySelector('.datepicker-dialog-mismatch');
</script>

希望它会覆盖 selectorAll 但没有任何改变。 然后我添加了

<style>
    .datepicker-dialog-mismatch .header {
        cursor: default;
        background-color: white;
        padding: 7px;
        font-weight: bold;
        text-transform: uppercase;
        color: black;
        justify-content: space-around;
}
</style>

在我的 html 文件的顶部，但问题仍然存在。 我可以使用哪些其他选项/功能来覆盖 header？

Answer 1

tablesorter function 与我的日历重叠，因此导致它显示不正确。

jQuery(document).ready(function() {
        jQuery("#view_table").tablesorter();
    });

一旦我将其注释掉，日历就会正常工作，因为它应该水平显示日期。