菜单项上的css3自定义动画效果不工作

我编写了下面的代码，必须对菜单项中的按钮产生“脉动”效果

<p:menuitem>

这就是风格：

<h:head>
  <link rel="stylesheet" type="text/css"/>
 <style>
        ul.ui-menu-child {
         white-space: nowrap;
         width: auto !important;
        }

 @-webkit-keyframes glow {
  0% {
    -webkit-box-shadow: 0 0 16px rgba(66, 140, 240, 0.5);
    border-color: rgba(0,0,255,0.5);
  }
  100% {
    -webkit-box-shadow: 0 0 16px rgba(66, 140, 240, 1.0), 0 0 36px rgba(0, 140, 255, 1.0);
    border-color: rgba(0,0,255,1.0);
  }
 }
@-moz-keyframes glow {
  0% {
    -moz-box-shadow: 0 0 16px rgba(66, 140, 240, 0.5);
    border-color: rgba(0,0,255,0.5);
  }
  100% {
    -moz-box-shadow: 0 0 16px rgba(66, 140, 240, 1.0), 0 0 36px rgba(0, 140, 255, 1.0);
    border-color: rgba(0,0,255,1.0);
  }
}
@-o-keyframes glow {
  0% {
    box-shadow: 0 0 16px rgba(66, 140, 240, 0.5);
    border-color: rgba(0,0,255,0.5);
  }
  100% {
    box-shadow: 0 0 16px rgba(66, 140, 240, 1.0), 0 0 36px rgba(0, 140, 255, 1.0);
    border-color: rgba(0,0,255,1.0);
  }
}
@keyframes glow {
  0% {
    box-shadow: 0 0 16px rgba(66, 140, 240, 0.5);
    border-color: rgba(0,0,255,0.5);
  }
  100% {
    box-shadow: 0 0 16px rgba(66, 140, 240, 1.0), 0 0 36px rgba(0, 140, 255, 1.0);
    border-color: rgba(0,0,255,1.0);
  }
}


.ui-widget:hover .ui-menuitem:hover .ui-corner-all:hover .ui-menu-parent:hover {
  -webkit-animation-name: glow;
  -webkit-animation-duration: 1s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-direction: alternate;
  -webkit-animation-timing-function: ease-in-out;

  -moz-animation-name: glow;
  -moz-animation-duration: 1s;
  -moz-animation-iteration-count: infinite;
  -moz-animation-direction: alternate;
  -moz-animation-timing-function: ease-in-out;

  -o-animation-name: glow;
  -o-animation-duration: 1s;
  -o-animation-iteration-count: infinite;
  -o-animation-direction: alternate;
  -o-animation-timing-function: ease-in-out;

  animation-name: glow;
  animation-duration: 1s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-timing-function: ease-in-out;
}

</style>
<meta name="viewport" content="width=device-width"/>

ul.ui-menu-child{
空白：nowrap；
宽度：自动！重要；
}
@-webkit关键帧发光{
0% {
-webkit盒阴影：0 0 16像素rgba（66、140、240、0.5）；
边框颜色：rgba（0,0255,0.5）；
}
100% {
-webkit盒阴影：0 16像素rgba（66、140、240、1.0）、0 36像素rgba（0、140、255、1.0）；
边框颜色：rgba（0,0255,1.0）；
}
}
@-moz关键帧发光{
0% {
-moz盒阴影：0 0 16像素rgba（66、140、240、0.5）；
边框颜色：rgba（0,0255,0.5）；
}
100% {
-moz盒阴影：0 16像素rgba（66，140，240，1.0），0 36像素rgba（0，140，255，1.0）；
边框颜色：rgba（0,0255,1.0）；
}
}
@-o关键帧发光{
0% {
盒影：0 0 16像素rgba（66、140、240、0.5）；
边框颜色：rgba（0,0255,0.5）；
}
100% {
盒影：0 16像素rgba（66，140，240，1.0），0 36像素rgba（0，140，255，1.0）；
边框颜色：rgba（0,0255,1.0）；
}
}
@关键帧发光{
0% {
盒影：0 0 16像素rgba（66、140、240、0.5）；
边框颜色：rgba（0,0255,0.5）；
}
100% {
盒影：0 16像素rgba（66，140，240，1.0），0 36像素rgba（0，140，255，1.0）；
边框颜色：rgba（0,0255,1.0）；
}
}
.ui小部件：hover.ui菜单项：hover.ui角点全部：hover.ui菜单父项：hover{
-webkit动画名称：发光；
-webkit动画持续时间：1s；
-webkit动画迭代计数：无限；
-webkit动画方向：交替；
-webkit动画计时功能：轻松输入输出；
-moz动画名称：辉光；
-moz动画持续时间：1s；
-moz动画迭代次数：无限；
-moz动画方向：交替；
-moz动画计时功能：轻松输入输出；
-o-animation-name:glow；
-o-动画-持续时间：1s；
-o-动画-迭代-计数：无限；
-o方向：交替；
-o-动画-计时-功能：轻松输入输出；
动画名称：辉光；
动画持续时间：1s；
动画迭代次数：无限；
动画方向：交替；
动画计时功能：轻松进出；
}

这是我在代码检查器/firebug中看到的类

<li class="ui-widget ui-menuitem ui-corner-all ui-menu-parent" aria-haspopup="true" role="menuitem" style="width: 115px">

---

但它不起作用为什么？

您应该在每个选择器之间添加一个逗号：

.ui-widget:hover,
.ui-menuitem:hover,
.ui-corner-all:hover,
.ui-menu-parent:hover {
    /* ... */
}

.ui-widget.ui-menuitem.ui-corner-all.ui-menu-parent:hover {
    /* ... */
}

或者将所有类合并到一个选择器中：

.ui-widget:hover,
.ui-menuitem:hover,
.ui-corner-all:hover,
.ui-menu-parent:hover {
    /* ... */
}

.ui-widget.ui-menuitem.ui-corner-all.ui-menu-parent:hover {
    /* ... */
}

---

@弗兰克：如果不包含逗号，则使用的是后代选择器（这意味着出现在每个空格后面的元素是出现在它前面的元素的后代）。请在此处阅读更多信息：