当我更改其中一个菜单标题的字体颜色时，为什么我的网站上的每种字体颜色都会发生变化？

Question

每当我在其中一个菜单标题上添加随机颜色类时，它都会改变整个网站正文的字体颜色

这是 wordpress 网站菜单上的 HTML

  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%);
  }

<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></div></div>

这是我添加 CSS/HTML 时它在做什么的图片

Picture of font-color on website

Answer 1

罪魁祸首是此行中的 <strong> 结束标记格式错误：

<strong style=""> FLASH SALE GET UP TO 25% OFF EVERYTHING APPLY CODE "HTYCNQX2" AT CHECKOUT<strong>

应该是

<strong style=""> FLASH SALE GET UP TO 25% OFF EVERYTHING APPLY CODE "HTYCNQX2" AT CHECKOUT</strong>

注意`结束标签的区别。

当存在格式错误的 HTML 标记时，用户代理在大多数情况下都会尝试呈现网站。在这种情况下，因为关闭 <strong> 标记被替换为打开 <strong> 标记。用户代理通过使之后的所有内容，现在搁浅，打开<strong>标签“强”，尽力弄清楚什么是正确的。

  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%);
  }

<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">

<body>
  <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>
    </div>
  </div>
  <div>
    <strong>This will happen to anything wrapped in a &lt;strong&gt; tag because of the css animation being attached to &lt;strong&gt; tag</strong>
  </div>
  <p>I'm a &lt;p&gt; tag in the body but with no strong tag</p>
</body>