如何基于父元素类编号优化Sass/CSS的当日营业时间样式设置？

原生CSS方案（推荐，更简洁） #

在React里给<ul>元素添加类的同时，额外设置一个CSS变量，把当前星期数传入：

const currentDay = new Date().getDay();
// 注意：原生getDay()返回0对应周日，若你的列表是周一到周日排序，需转成7：currentDay === 0 ? 7 : currentDay
return (
  <ul className={`day-${currentDay}`} style={{ '--current-day': currentDay }}>
    {/* 营业时间<li>列表 */}
  </ul>
);

然后CSS里只需要写一条规则即可：

ul[class^="day-"] li:nth-child(var(--current-day)) {
  font-weight: bold;
}

不管当前是周几，这条规则都会自动匹配对应的<li>元素，完全不用手动写7条重复样式。

Sass方案（适合纯预编译场景） #

如果不想用CSS变量，用Sass的循环可以自动生成所有day-N对应的规则，避免手动重复编写：

@for $i from 1 through 7 {
  .day-#{$i} li:nth-child(#{$i}) {
    font-weight: bold;
  }
}

编译后会自动生成7条对应的CSS规则，和手动编写的效果一致，但只需要维护一段循环代码，更省心。

补充提示 #

如果你的营业时间列表是周一到周日排序，记得把原生getDay()返回的0（周日）转换成7，保证数字和<li>的顺序对应，避免样式匹配错误。

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