DNN HTML编辑器中CSS选择器特殊符号转义导致样式失效求助

I’ve run into this exact issue with DNN’s HTML editor before—TinyMCE (the default editor in most DNN versions) automatically encodes special characters like > into > to prevent unintended HTML parsing, but this breaks CSS selectors that rely on the direct child combinator. Here are a few reliable solutions:

• Best Practice: Add CSS to your theme’s stylesheet
  This avoids the editor’s encoding entirely and is the cleanest approach. If you have access to your DNN theme files:

  1. Navigate to your theme’s folder (typically under /Portals/_default/skins/[YourThemeName]/ or your portal-specific skins directory).
  2. Open your main CSS file (e.g., style.css or theme.css).
  3. Paste your CSS rule directly into the file:

     .overlaybox > .overlaytext { 
         border: 1px solid #fff; 
         padding: 40px; 
         max-width: 550px; 
         margin: 0 auto; 
     }
     

  4. Save the file and clear your DNN cache (go to Settings > System > Clear Cache) to see the changes take effect immediately.

• Workaround: Use alternative selector syntax in the HTML editor
  If you can’t edit the theme’s CSS, try these workarounds that won’t get escaped:

  • Descendant selector: If .overlaytext elements only exist inside .overlaybox (no nested instances), replace the direct child combinator with a space:

    .overlaybox .overlaytext { 
        border: 1px solid #fff; 
        padding: 40px; 
        max-width: 550px; 
        margin: 0 auto; 
    }
    

  • Target a custom class: Add a unique class directly to your .overlaytext HTML element, then style that class instead:

    .centered-overlay-text { 
        border: 1px solid #fff; 
        padding: 40px; 
        max-width: 550px; 
        margin: 0 auto; 
    }
    

    Then update your HTML to use <div class="overlaytext centered-overlay-text">...</div>.

• Advanced: Adjust editor settings to allow unencoded characters
  If you have admin access, you can tweak the editor’s configuration to stop encoding > in style tags:

  1. Go to Persona Bar > Settings > Site Settings > Site Behavior > HTML Editor.
  2. Select the editor profile you’re using (usually "Default").
  3. For TinyMCE, look for the valid_elements or extended_valid_elements setting, and add style[*] to allow all content within style tags without encoding.
  4. Warning: This can introduce security risks if untrusted users have access to the HTML editor, so only use this if you control all content on the site.

内容的提问来源于stack exchange，提问作者Hardik Masalawala