CSS hover触发p元素仅自身文本生效 子元素无动画如何修复

• 原有规则#email:hover~p a使用了兄弟选择器~，仅能匹配#email之后同级的p元素内的a标签，完全无法命中#email自身内部的a标签，因此不生效。
• 父元素p设置的color: transparent仅作用于自身直接文本，子元素a单独设置了color: black，优先级高于父元素继承属性，因此a标签文本不会透出父元素的渐变动画效果。

删除错误的兄弟选择器规则，新增p hover状态下所有子元素的透明色设置即可，完整代码如下：

p{
  color: black;
  margin: 5px;
  transition: .5s;
}
a{
  text-decoration: none;
  color: black;
}
p:hover{
  background: linear-gradient(to right, #6666ff, #0099ff , #00ff00, #ff3399, #6666ff);
  color: transparent;
  background-size: 400% 100%;
  background-clip: text;
  animation: rainbow 35s linear infinite;
  transition: .5s;
}
/* 新增规则：hover时p内所有子元素文本设为透明，继承父元素动画效果 */
p:hover * {
  color: transparent;
  transition: .5s;
}
@keyframes rainbow{
  to{
   background-position: 5500vh;
  }
}

修改后hover任意p元素时，p自身文本和内部所有子元素（包括a标签等嵌套元素）的文本都会同步展示彩虹渐变动画，整行效果统一。

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