打开加载外部HTML的模式对话框后，CSS被覆盖

Question

我的ASP中有一个选项卡向导。NET MVC项目，在其中一个选项卡中，我通过呈现从外部api检索到的html来打开模式对话框。但是，当关闭向导并转到下一个选项卡时，选项卡中的表格样式(边框颜色和厚度(将更改为模式对话框中的html样式。到目前为止，我试图通过!important强制td，th，border样式，但没有太大意义。那么，在这种情况下，我该怎么办？我无法修改用css返回的html的外部源的样式。我还试图在模态关闭后通过JavaScript(set-css(强制使用它的样式，但没有那么大意义。知道吗？

以下是我在css和html页面中的一些尝试：

.table > tbody > tr > td, .table > tbody > tr > th, .table > tfoot > tr > td, 
.table > tfoot > tr > th, .table > thead > tr > td, .table > thead > tr > th {
padding: 8px;
line-height: 1.42857 !important;
vertical-align: top !important;
border-top: 1px solid #e7ecf1 !important;
vertical-align: middle !important;
}

<table class="table table-striped table-hover">
<thead>
<tr>
<th>Aaaaaa </th>
<!-- code omitted for brevity -->
</tr>
</thead>
<tbody>
@foreach (var item in Model)
{
<tr>
<td>Bbbbbbbbb</td>
<!-- code omitted for brevity -->
</tr>
}
</tbody>
</table>

Answer 1

您可以在关闭模态时删除<style>标记：

// call this function on closing the modal
function deleteStyleTag() {
const styleTag = document.querySelector('.modal style');
// change selector according to your situation
// remove the <style> tag
styleTag.parentElement.removeChild(styleTag);
}