为什么修改WordPress站点单个菜单标题字体颜色后全站字体均变色？

问题根源 #

你编写的CSS代码使用了全局的strong标签选择器，站点内所有使用<strong>标签加粗的文本都会触发你定义的10s循环变色动画，这就是整个网站body区域字体颜色全部变化的原因。

修复步骤 #

1. 调整CSS选择器范围，将变色动画仅限定在滚动公告模块内的strong标签上，修改后的对应CSS代码如下：

/* 把原来全局的strong选择器替换成下面的选择器，其他CSS代码不用改动 */
#scroll-text strong {
  -webkit-animation-direction: normal;
  -webkit-animation-duration: 10s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-name: colours;
  -webkit-animation-timing-function: ease;
}

@-webkit-keyframes colours {
  0% {
    color: #39f;
  }
  15% {
    color: #8bc5d1;
  }
  30% {
    color: #f8cb4a;
  }
  45% {
    color: #95b850;
  }
  60% {
    color: #944893;
  }
  75% {
    color: #c71f00;
  }
  90% {
    color: #bdb280;
  }
  100% {
    color: #39f;
  }
}

#scroll-container {
  border: 3px;
  border-radius: 5px;
  overflow: hidden;
}

#scroll-text {
  /* animation properties */
  -moz-transform: translateX(100%);
  -webkit-transform: translateX(100%);
  transform: translateX(100%);
  -moz-animation: my-animation 15s linear infinite;
  -webkit-animation: my-animation 15s linear infinite;
  animation: my-animation 15s linear infinite;
  /*more*/
}

/* for Firefox */
@-moz-keyframes my-animation {
  from {
    -moz-transform: translateX(100%);
  }
  to {
    -moz-transform: translateX(-100%);
  }
}

/* for Chrome */
@-webkit-keyframes my-animation {
  from {
    -webkit-transform: translateX(100%);
  }
  to {
    -webkit-transform: translateX(-100%);
  }
}

@keyframes my-animation {
  from {
    -moz-transform: translateX(100%);
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
  }
  to {
    -moz-transform: translateX(-100%);
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
  }
}

2. 补充修复原有HTML代码中strong标签未正确闭合的问题，修正后的HTML代码如下：

<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div id="scroll-container">
  <div id="scroll-text"><i class="fa fa-gift"></i><strong style=""> FLASH SALE GET UP TO 25% OFF EVERYTHING APPLY CODE "HTYCNQX2" AT CHECKOUT</strong></div>
</div>

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