将 !important CSS 样式应用到 div，而不是子项

Question

我在 Confluence 工作，我正在尝试为 UI boxes 创建一些 CSS 样式（由 divs 组成，我可以使用 !important) 而没有进行到 child divs。由于其他宏（divs 具有默认样式）可以嵌套在这些 UI boxes 中，!important 样式无意间被执行。

更具体地说 - 我在 div.rwui_type_note 中有一个黄色的 background-color。当用户在 Note UI box 中创建面板宏时，里面是另一个 div。父 div（UI 注）样式使子 div（面板）中的文本 background 变为黄色。

我需要 div.panel-content 来保持 Confluence 定义的默认样式，或者使用页面编辑器时用户在宏中手动定义的样式。

这是注释 UI 框的自定义 CSS：

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

以下是在注释 UI 框内创建白色 bg 面板时，Confluence 如何创建 HTML：

<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>

这是它的样子： Screenshot - UI Box with Panel

Answer 1

你可以用>。我想这会解决你的问题。

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

另一个建议是不要在内联元素中使用块元素。

Answer 2

如果我理解你的目标是正确的，你可以通过继承父 background-color 属性

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

.panelContent p {
  background-color: inherit !important;
}

<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>

将 !important CSS 样式应用到 div，而不是子项

Apply !important CSS style to div, not children

html

css

text-styling