是这样的，我打算做一个按钮的特效，具体如下：
初始状态是，class=line 的span标签处于整个main框体外（用样式来使他看起来像一条线）。
当 class=button 的a标签处于hover状态时，class=line 的span元素会向右移动直到和main框体左对齐，并且它的长度（width）变得和main框体一样长。
.button:hover .line这个写法是从 按钮特效-技术学习教程-慕课网 学的，看他老人家用得风生水起，不明白为何我用不了。
先行感谢想建议我用jq或者js实现的朋友。我还是想用css3实现，如果可以的话。
下面附上代码：
<!DOCTYPE html><html><head> <title>about</title> <meta charset="utf-8" /> <style type="text/css"> *{ padding:0; margin:0; } a{ text-decoration:none; color:#fff; margin:20px 0; } .main{ background:#aaa; color:#fff; width:80px; height:100px; text-align:center; position:relative; left:200px; top:100px; } .main .inner{ margin-top:50px; background:#4b260a; border-radius:2px; } .line{ width:5px; height:2px; border:0; background:#000; position:absolute; top:40px; left:-100%; transition:0.3s ease-out; -ms-transition:0.3s ease-out; -o-transition:0.3s ease-out; -moz-transition:0.3s ease-out; -webkit-transition:0.3s ease-out; } .button:hover .line{ width:100%; left:0; } </style></head><body> <div class="main"> <a href="#" class="button">按钮<div class="inner">button</div></a> <span class="line"></span> </div></body></html>解决方案
.button:hover .line这样写是后代选择器，你的子孙元素有这个类吗？
解决方案：
使用相邻兄弟选择器：.button:hover + .line