2，你可以把这里面的空格当作［内］，也就是子孙元素的意思
#menu ul li ---- #menu 内的 ul 内的 li
#menu ul li:first-child a:hover:after ---- #menu 内的 ul 内的 li(并且是ul的第一个子元素) 内的 a 鼠标指向时 after
after/before 的意义在于，他们不存在在html文档中，但是又能被浏览器显示出来，因此，可以用来实现一些效果。
常用的例如：
～文字前面的icon，不用在html中插入多余的空元素，直接使用after或者before，前面后面随便插.......
～清除浮动
～为引用的文字加入引号
～画一些有意思的图标
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
/*隐藏下拉列表*/
.list{
display: none
}
/*鼠标移动显示下拉列表*/
.menu:hover .list{
display: block
}
</style>
</head>
<body>
<div class="menu">
<a href="#">下拉菜单</a>
<div class="list">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
</div>
</body>
</html>
