Question

我在Confluence工作，并且我尝试为CSS创建一些UI boxes样式（由divs组成，我可以使用{!important更改child divs 1}}）没有传递给divs。由于其他宏（UI boxes具有默认样式）可以嵌套在这些!important中，因此background-color样式会无意中传播。

更具体一点 - div.rwui_type_note中有一个黄色div。当用户在Note UI box内创建面板宏时，Inside是另一个div。父background（UI注释）样式正在使子div（面板）中的文本div.panel-content变为黄色。

我需要.rwui_type_note, .rwui_type_note p { background-color: #FFDC1E !important; /*Needs to be important to override defaults*/ color: black!important; }来保持Confluence定义的默认样式，或者在使用页面编辑器时由宏中的用户手动定义。

以下是Note UI Box的自定义CSS：

HTML

以下是Confluence在Note UI框中创建白色bg面板时如何创建<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>：

X.shape
Out[6]: (15091, 6000)

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

Answer 1

如果我理解您的目标是正确的，您可以通过继承父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>

Answer 2

您可以使用>。我认为这将解决您的问题。

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

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

将重要的CSS样式应用于div，而不是孩子

2 个答案: