如何为WooCommerce(woo-pack Cart)配送描述中的邮箱编写CSS

云原生阿岚

2026-7-1

解决方案

一、用CSS单独给邮箱变色

你可以根据检查工具截图里的实际元素类名，编写CSS实现邮箱文本变色。比如如果包裹配送描述的容器类是.shipping-method-description，代码如下：

.shipping-method-description:contains("你的审批邮箱@xxx.com") {
  color: #ff4d4f; /* 替换成你想要的颜色即可 */
}

要是:contains()伪类不生效，就换更精确的选择器（结合父元素类）：

.woocommerce-shipping-method p:contains("你的审批邮箱@xxx.com") {
  color: #165dff;
}

注意：把代码里的邮箱替换成你实际的审批邮箱，选择器也要匹配页面上的真实元素类名。

二、把邮箱转为可点击的超链接（需要JavaScript）

CSS只能修改样式，无法添加超链接这类交互元素，所以得用JS实现。下面是可直接复用的代码，调整参数就能用：

document.addEventListener('DOMContentLoaded', function() {
  const targetEmail = '你的审批邮箱@xxx.com';
  // 替换成你截图里找到的描述容器选择器
  const descElement = document.querySelector('.shipping-method-description');
  
  if (descElement && descElement.textContent.includes(targetEmail)) {
    // 把邮箱替换成带mailto协议的超链接，样式可自行调整
    descElement.innerHTML = descElement.textContent.replace(
      targetEmail,
      `<a href="mailto:${targetEmail}" style="color:#165dff; text-decoration:underline;">${targetEmail}</a>`
    );
  }
});