Hmm, I’ve run into this exact issue before—let’s break down why your !important isn’t working and fix it.

The Root Cause #

Your current CSS uses *:not(.selectable) to disable selection on every element that doesn’t have the .selectable class. The problem here is that child elements inside your .selectable containers don’t have the .selectable class themselves, so they’re still getting user-select: none applied. The !important on .selectable only affects the parent element, not its contents (like <p>, <span>, or even plain text nodes).

The Fix #

To ensure all content inside .selectable elements is selectable, you need to target both the .selectable class and all its descendant elements. Update your CSS like this:

<style>
*:not(.selectable) {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Target the .selectable element AND all its children */
.selectable, .selectable * {
  -webkit-touch-callout: auto !important;
  -webkit-user-select: auto !important;
  -khtml-user-select: auto !important;
  -moz-user-select: auto !important;
  -ms-user-select: auto !important;
  user-select: auto !important;
}
</style>

This way, every element inside a .selectable container inherits the selectable behavior, overriding the universal user-select: none rule.

Additional Checks #

If you still can’t select text after this change:

• Verify that the .selectable class is applied to the correct elements (or their parent containers) using your browser’s dev tools.
• Check for other CSS rules with higher specificity (even without !important) that might be overriding these styles. Use the "Styles" tab in Inspect Element to see which rules are being applied to the text.

内容的提问来源于stack exchange，提问作者Ben Muircroft