能否通过jQuery创建CSS类，实现容器内所有后代元素红色描边？

当然可以用jQuery实现这个需求！不过其实纯CSS就能轻松搞定，先给你两种方案参考，看哪种更适合你的场景：

你完全不需要依赖JavaScript，直接定义一个CSS类，利用后代选择器选中容器内所有元素即可：

/* 定义高亮类 */
.highlight-descendants * {
  outline: 1px solid red;
}

用法也很简单，给目标div添加这个类就行：

<div class="highlight-descendants">
  <!-- 这里面的所有后代元素都会显示红色描边 -->
  <p>测试文本</p>
  <button>按钮</button>
  <div>嵌套div</div>
</div>

这种方式性能更好，也更易维护，因为样式和逻辑完全分离了。

如果你的需求需要结合JavaScript逻辑（比如点击按钮才触发高亮、或者动态生成元素后再高亮），用jQuery完全可以实现，有两种常见方式：

方式1：直接给后代元素设置内联样式 #

这种方式适合临时高亮，直接通过jQuery找到目标div的所有后代，设置outline样式：

// 假设目标div的id是"my-container"
$('#my-container').find('*').css('outline', '1px solid red');

// 如果要给多个div（比如带特定类的）应用，写法如下：
// $('.target-container').find('*').css('outline', '1px solid red');

方式2：通过添加CSS类实现（更灵活） #

先在CSS里定义好高亮的类，再用jQuery给后代元素添加这个类，这样后续移除高亮也更方便：

/* 先定义高亮元素的类 */
.red-outline {
  outline: 1px solid red;
}

// 给目标div的所有后代添加类
$('#my-container').find('*').addClass('red-outline');

// 后续需要移除高亮时，只需调用：
// $('#my-container').find('*').removeClass('red-outline');

两种jQuery方法各有优劣：直接设置内联样式更快捷，但样式写死在JS里；用类的方式更符合前端最佳实践，方便样式统一修改和移除。

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