禁用 CSS 特定 div 中所有元素的样式？

Question

My script generates a user's email signature and then displays it in a popup modal. The issue I have is that the modal-body div is also subject to the view's CSS styling which messes with the look and feel of the signature, hence I would like to disable CSS to get an unstyled look at the signature.

Is it possible to disable CSS styling for all elements in the modal-body div (p, br, a href, etc.) and how does one best go about this?

Thanks

Answer 1

There are various CSS reset values you can use with the all property to set the value of almost every property.

.modal-body {
  all: initial | unset | revert
}

• initial value for property default values
• unset value for property default or inherit if an inherited property
• revert for default value for that element (browser styles), I think the only difference here would be that display would be block instead of inline for a div element.

The example above would only style the .modal-body itself though, if you want to reset values for every single element within it as well you could do the following:

.modal-body,
.modal-body * {
  all: initial | unset | revert
}

This will not only target .modal-body but every descendant of .modal-body . Be careful with a value other than unset for this though as it's extremely powerful, and with great power comes great responsibility.

If you're still having issues, your other styles might be more specific and therefore override this rule. You could try and add !important however that would necessitate using it on every re-style of elements in your modal. In this case I would suggest giving your modal an ID and using that to style it, and combing through your other CSS to remove ID selectors flattening the specificity.

Not sure I fully understand your comment... If this is not the HTML you meant, please update your question to contain your HTML and I'll update this answer:

<div id="modalSignaturePreview">
  <div class="modal-body"></div>
</div>

Anyways for the above HTML you can target it in CSS with #modalSignaturePreview.modal-body , here we're targeting all elements with a class of modal-body that are a descendant of any element with an ID of modalSignaturePreview

Answer 2

Sounds like you want the all css property.

.modal-body * {
  all: initial;
}

Example here

Should return everything to before it was modified with CSS at all. The specificity for .modal-body * is only 0 1 0 though, so you may need to make this selector more specific or add !important .