如何为Confluence特定Macro的Panel Header添加CSS样式？

要只给特定Macro的面板标题设置样式，核心是利用Macro的唯一ID精准定位元素，避免全局样式污染，具体操作如下：

• 获取目标Macro的唯一标识
  打开页面后按F12调出浏览器开发者工具，定位到目标面板宏的HTML结构。Confluence会为每个宏分配独有的data-macro-id属性（或带macro前缀的ID），比如你会看到类似结构：

  <div class="macro" data-macro-id="abc123-def456-ghi789">
      <div class="panel">
          <div class="panelHeader">目标标题</div>
          <!-- 宏其他内容 -->
      </div>
  </div>
  

  这里的abc123-def456-ghi789就是该宏的唯一ID。

• 编写精准的CSS选择器
  将宏的唯一标识和.panelHeader组合，就能仅选中目标宏的面板标题，不会影响其他面板：

  /* 替换为你实际获取到的macro ID */
  div[data-macro-id="abc123-def456-ghi789"] .panelHeader {
      color: #2980b9;
      font-family: "Arial", sans-serif;
      font-size: 17px;
      font-weight: bold;
      border-left: 4px solid #27ae60;
  }
  

  如果宏容器是用ID属性标记（比如id="macro-12345"），则选择器改为#macro-12345 .panelHeader即可。

• 验证生效范围
  应用该CSS后，无论原页面还是被嵌入到其他包含面板的页面中，只有目标宏的面板标题会应用样式，其他面板不受影响。

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