3

我在 Confluence 工作，我正在尝试为（由我可以使用更改的）创建一些CSS样式，而无需执行 to 。由于其他宏（具有默认样式）可以嵌套在这些宏中，因此这些样式会无意中进行。UI boxesdivs!importantchild divsdivsUI boxes!important

更具体地说 - 我background-color在div.rwui_type_note. div当用户在Note UI box. 父div（UI Note）样式使background子div（面板）中的文本变黄。

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

这是 Note UI Box 的自定义 CSS：

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

HTML下面是在 Note UI 框中创建白色背景面板时Confluence 如何创建的：

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

这是它的样子： 屏幕截图 - 带有面板的 UI 框

4

2 回答 2

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>

于 2017-08-16T13:51:02.503 回答
0

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

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

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

于 2017-08-16T13:49:07.100 回答