内嵌CSS样式未加载排查：标签声明是否错误？需放入HTML容器

我需要将下述代码放入一个HTML容器中，要求所有内容必须内联，但CSS样式无法加载。下方代码的内嵌CSS样式未生效，请问我是否错误声明了标签？

原代码 #

<!DOCTYPE html>
<html>

<head>
  <title></title>
</head>
<style>
   :root {
    --color: #44cc44;
  }
  
  .my-btn-container .DlocalGoButton {
    background-color: var(--color);
    padding: 15px;
  }
</style>

<body>
  <center>
    <script data-reference-id="2f334db3-3df2-46c2-93cd-fd2c05079acf">
      const s = document.createElement("script");
      s.src = "https://static.dlocalgo.com/dlocalgo.min.js", s.async = !0, document.body.appendChild(s), s.addEventListener("load", () => {
        const e = document.querySelector('script[data-reference-id="2f334db3-3df2-46c2-93cd-fd2c05079acf"]'),
          t = e.parentNode,
          n = "dp-btn-2f334db3-3df2-46c2-93cd-fd2c05079acf",
          c = document.createElement("div");
        c.classList.add("my-btn-container");
        c.classList.add("my-btn-container"); // we are adding our own class to apply css
        c.id = n, t.insertBefore(c, e);
        new DlocalGo("wPvxvAjzGSlDGrYLQDamRXkTDKvsEDyc").createCheckout(n, {
          country: "UY",
          currency: "UYU",
          amount: "17000",
          lang: "",
          text: "quiero inscribirme"
        })
      });
    </script>

  </center>

</body>

</html>

你的标签声明没有错误，CSS不生效主要由以下几个原因导致，对应修复方案如下：

• CSS标签位置不符合标准：你将<style>放在了<head>外部，虽然部分浏览器能兼容，但这可能影响样式的加载优先级与解析顺序。标准写法中<style>必须放在<head>内部。
• 样式权重不足：DlocalGo生成的按钮自带了优先级更高的内联样式或更具体的选择器，你的.my-btn-container .DlocalGoButton无法覆盖原有样式。
• 动态元素样式覆盖：按钮是通过JS动态生成的，第三方库的样式可能在你的样式之后加载，从而覆盖自定义样式。

具体修复步骤 #

1. 调整<style>位置到<head>内

<head>
  <title></title>
  <style>
    :root {
      --color: #44cc44;
    }
    
    .my-btn-container .DlocalGoButton {
      background-color: var(--color) !important;
      padding: 15px !important;
    }
  </style>
</head>

2. 提升样式优先级
   可以通过添加!important强制覆盖第三方样式，或者使用更具体的选择器（结合容器ID）：

#dp-btn-2f334db3-3df2-46c2-93cd-fd2c05079acf .DlocalGoButton {
  background-color: var(--color);
  padding: 15px;
}

3. 动态注入样式（可选）
   如果上述方法无效，可以在按钮创建完成后动态注入样式，确保样式在第三方样式之后加载：

new DlocalGo("wPvxvAjzGSlDGrYLQDamRXkTDKvsEDyc").createCheckout(n, {
  country: "UY",
  currency: "UYU",
  amount: "17000",
  lang: "",
  text: "quiero inscribirme"
}, () => {
  // 按钮创建完成后添加样式
  const styleEl = document.createElement('style');
  styleEl.textContent = `.my-btn-container .DlocalGoButton { background-color: #44cc44; padding: 15px; }`;
  document.head.appendChild(styleEl);
});

额外优化 #

原代码中重复执行了c.classList.add("my-btn-container");，属于冗余代码，删除其中一次即可。

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