如何避免父页面中的CSS

Question

我正在使用Bootstrap Modal Plugin

$("#summaryFileDisplay").html(data.summaryfileContent);
$("#myModal").modal("show");

在上面的代码中， data.summaryfileContent 包含html和css数据，我将其呈现为 summaryFileDisplay id

模态渲染很好，但它也会在父CSS中进行更改。

我怎样才能避免相同的

Answer 1

在以模态渲染的所有样式之前添加.modal-dialog。因此它将使样式专用于Bootstrap对话框。

/*
e.g.
Current CSS code.*/
.lineBorder {
    border: solid 1px #000;
}

/*Change above to*/
.modal-dialog .lineBorder {
    border: solid 1px #000;
}