如何使用CSS选择器应用于子元素

 

如何实现这种下划线悬浮到选项时下划线只出现在子元素内?

  可选用后代选择器, 即p a{},该选择器表示应用于所有位于<p>元素内的<a>元素,不论它们之间是否嵌套其他元素

也可以选用子元素选择器,即li>a {},该选择器表示应用于所有父元素为<li>的<a>元素(对页面中的其他<a>元素不起作用)

 关键代码:

1  ul.recommend a:hover {
2                 color: yellow;
3                 text-decoration: underline;
4             }//后代选择器

1  ul>a:hover {
2                 color: yellow;
3                 text-decoration: underline;
4             }//子元素选择器

完