CSS添加.stn样式可正常生效，通过JS添加同类后样式不显示如何解决

问题原因及修复方案 #

你一共存在两个需要修正的问题：

1. JS 中 classList 操作的类名多写了前缀.
classList.add()、classList.remove() 方法传入的参数直接是类名字符串，不需要加 CSS 选择器里的类前缀.。你现在的代码相当于给元素添加了名为.stn的类，自然无法匹配 CSS 里.stn选择器对应的样式。
   修正所有 JS 中类操作的代码，把所有类似：

home.classList.add('.stn');
work.classList.remove('.stn');
about.classList.remove('.stn');

写法里的.stn都改成stn即可：

home.classList.add('stn');
work.classList.remove('stn');
about.classList.remove('stn');

2. CSS 选择器优先级不足，会被原有规则覆盖
   你现有的.stn是单类选择器，优先级低于nav ul li a这种多层标签选择器，就算类添加正确，样式也会被默认规则覆盖。你需要把.stn的选择器权重提高，修改为：

nav ul li a.stn {
  text-decoration: line-through;
  /* THIS IS THE STYLE BEING APPLIED */
}

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