如何在不拆分列表的情况下单独样式化div内指定星期文本？

没问题！你之前碰到的问题很典型——:contains()选择器会选中整个<div>元素，所以你设置的样式会作用于容器里的所有文本，而不是单个星期几。要实现单独样式化某一天，我们可以用jQuery把目标文本包裹在一个<span>标签里，这样就能给这个span单独定义样式了，完全不用修改原HTML结构或者拆成列表。

具体实现步骤 #

1. 保留原HTML结构：

<div class="working-days">Monday, Tuesday, Wednesday, Thursday, Friday</div>
<div class="weekends">Saturday, Sunday</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

2. 添加jQuery代码动态包裹目标文本：
   我们可以利用html()方法的回调函数，获取div原有的内容，然后用正则表达式匹配目标星期几，将其替换为带<span>的版本：

// 定义要样式化的目标星期
var targetDay = 'Wednesday';

// 替换目标文本为带span的结构
$('.working-days').html(function(index, originalContent) {
  // 用正则匹配目标文本，全局替换（避免重复匹配的遗漏）
  return originalContent.replace(new RegExp(targetDay, 'g'), '<span class="highlighted-day">' + targetDay + '</span>');
});

3. 添加CSS样式：
   现在可以给这个<span>单独设置样式了：

.highlighted-day {
  text-decoration: underline;
  color: #e74c3c; /* 可选：添加颜色强调 */
  font-weight: bold; /* 可选：加粗 */
}

扩展：样式化多个星期几 #

如果需要同时样式化多个日期（比如Monday和Friday），只需要调整正则表达式即可：

// 定义多个目标星期
var targetDays = ['Monday', 'Friday'];

// 生成匹配多个目标的正则
var matchPattern = new RegExp(targetDays.join('|'), 'g');

$('.working-days').html(function(index, originalContent) {
  return originalContent.replace(matchPattern, function(matchedDay) {
    return '<span class="highlighted-day">' + matchedDay + '</span>';
  });
});

这个方法的核心是动态给目标文本添加独立的样式容器，既不用改动原有的HTML结构，也能精准控制单个星期几的样式，完全符合你的需求。

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