Apply !important CSS style to div, not children

I'm working in Confluence, and I'm trying to create some CSS styling for UI boxes (made up of divs that I can change using !important) without carrying through to child divs. Since other macros (divs with default styling) can be nested inside these UI boxes, the !important styles are carried through unintentionally.

To be more specific - I have a yellow background-color in the div.rwui_type_note. Inside is another div when a user creates a panel macro inside the Note UI box. The parent div (UI Note) styling is making the text background in a child div (Panel) yellow.

I need the div.panel-contentto keep it's default styling as defined by Confluence, or as manually defined by a user in the macro when using the page editor.

Here is the custom CSS for the Note UI Box:

.rwui_type_note, .rwui_type_note p 
{
    background-color: #FFDC1E !important; /*Needs to be important to override defaults*/
    color: black!important;
}

Here is how Confluence creates the HTML when the a white bg panel is created inside a Note UI box:

<div class="rwui_text_box rwui_text_small  rwui_type_note  rwui_id_caebfd70-f9c3-489b-9f95-c01c1aa13f36 ">
    <span class="rwui_icon rwui_iconfont_note"></span>
    <span class="rwui_content rwui_body rwui_has_icon ">
        <p>Text in a Note UI Box</p>
        <div class="panel" style="background-color: white;border-color: orange;border-width: 1px;">
            <div class="panelContent" style="background-color: white;">
                <p>Text in a Panel - user set to white background</p>
            </div>
        </div>
    </span>
</div>

Here is what it looks like: Screenshot - UI Box with Panel