如何用jQuery为.dot及其:after伪元素设置不同背景色？

嘿，这个问题其实挺典型的——伪元素（比如:after）并不是DOM中的实际节点，所以jQuery的.css()方法没法直接选中它们修改样式。不过有几种实用的解决方案，我给你详细说说：

方法1：使用CSS自定义属性（推荐） #

这是最简洁、易维护的方式，利用CSS变量来关联元素和伪元素的样式：

第一步：修改你的CSS代码，用变量替换固定背景色 #

.dot { 
  position: relative; 
  height: 16px; 
  width: 16px; 
  border-radius: 50%; 
  background: var(--dot-bg, #ccc); /* 定义变量，可选默认值 */
} 
.dot:after { 
  content: ""; 
  position: absolute; 
  top: 3px; 
  left: 3px; 
  height: 10px; 
  width: 10px; 
  border-radius: 50%; 
  animation: pulse 2s infinite; 
  transform-origin: center center; 
  background: var(--dot-after-bg, #999); /* 伪元素的变量 */
}
@keyframes pulse { 
  0% { transform: scale(1); opacity: 1; } 
  25% { transform: scale(1); opacity: 1; } 
  100% { transform: scale(4.5); opacity: 0; } 
}

第二步：在jQuery中设置这两个CSS变量 #

直接通过.css()方法给.dot元素设置变量，伪元素会自动继承使用这些变量值：

function test_connection(){ 
  var target=$(".dot"); 
  $.ajax({ 
    type:'POST', 
    url: '/test_connection.php', 
    cache:'false', 
    timeout: 5000, 
    success: function(a){ 
      inter=setTimeout(test_connection,15000); 
      // 同时设置主元素和伪元素的背景色
      target.css({
        "--dot-bg": "#77d804",
        "--dot-after-bg": "#55a802" // 替换成你需要的伪元素背景色
      }).html("<span data-toggle='tooltip' data-placement='bottom' data-original-title='Edit'></span>"); 
      connection=true; 
    }, 
  }); 
}

方法2：动态添加/切换CSS类 #

如果你的背景色是固定的几种状态（比如成功、失败），用类切换更清晰：

第一步：在CSS中定义状态类 #

/* 保留原基础样式 */
.dot { /* 原样式不变 */ }
.dot:after { /* 原样式不变 */ }

/* 连接成功的状态类 */
.dot.connection-success {
  background: #77d804;
}
.dot.connection-success:after {
  background: #55a802;
}

/* 可选：添加失败状态类备用 */
.dot.connection-failed {
  background: #ff4444;
}
.dot.connection-failed:after {
  background: #cc0000;
}

第二步：在jQuery中切换类 #

function test_connection(){ 
  var target=$(".dot"); 
  $.ajax({ 
    type:'POST', 
    url: '/test_connection.php', 
    cache:'false', 
    timeout: 5000, 
    success: function(a){ 
      inter=setTimeout(test_connection,15000); 
      // 移除其他状态类，添加成功类
      target.removeClass("connection-failed")
            .addClass("connection-success")
            .html("<span data-toggle='tooltip' data-placement='bottom' data-original-title='Edit'></span>"); 
      connection=true; 
    },
    error: function() {
      // 请求失败时切换到失败类
      target.removeClass("connection-success")
            .addClass("connection-failed");
      connection=false;
    }
  }); 
}

方法3：动态创建内联样式表 #

如果需要完全动态的颜色值（比如从后端接口返回自定义颜色），可以动态生成样式规则：

function test_connection(){ 
  var target=$(".dot"); 
  $.ajax({ 
    type:'POST', 
    url: '/test_connection.php', 
    cache:'false', 
    timeout: 5000, 
    success: function(a){ 
      inter=setTimeout(test_connection,15000); 
      
      // 创建或复用内联样式表
      let styleSheet = document.querySelector('#dot-dynamic-style') || document.createElement('style');
      if (!styleSheet.id) styleSheet.id = 'dot-dynamic-style';
      
      // 写入样式规则
      styleSheet.textContent = `
        .dot { background: #77d804 !important; }
        .dot:after { background: #55a802 !important; }
      `;
      document.head.appendChild(styleSheet);
      
      target.html("<span data-toggle='tooltip' data-placement='bottom' data-original-title='Edit'></span>"); 
      connection=true; 
    }, 
  }); 
}

总结 #

• 优先选方法1（CSS变量），代码简洁且符合现代CSS规范；
• 如果是固定状态切换，**方法2（类切换）**更易维护；
• 动态颜色场景用方法3（内联样式表）。

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