关于li标签中含有a标签下li:hover无效

之前遇到的一个问题，当时觉得很诡异，后面网上搜索答案，也没有搜到很满意的，这里自己记录下。

html代码如下： 

 <ul>
<li><a href="#">111111</a></li>
<li><a href="#">222222</a></li>
<li><a href="#">333333</a></li>
  </ul>

需要的效果是：鼠标hover到li标签上，整个li里面的文字颜色变红色。

可能一开始都认为是这样定义样式：ul li:hover{color:red;}   但是并没有效果。原因在于a:hover 的权重大于li:hover,并且a标签是行内元素，因此得先把a标签设置成block，也就是下面这样定义样式：

ul li a{display: block;}
ul li a:hover{color: #FF0000;}

这样子就能达到预期的效果了。