谁能帮我解释这段css代码，应该怎样理解？？

用逗号隔开的定义，是只多个定义使用同一个样式。
#nav1 .menu,
#nav2 .menu {
float: left; width: 670px;
}
上面这个定义等同于
#nav1 .menu {
float: left; width: 670px;
}
#nav2 .menu {
float: left; width: 670px;
}
即：
selectorA,selectorB{
style;
}
等价于：
selectorA{
style;
}
selectorB{
style;
}

用空格隔开表示的是筛选。所谓css的选择器，是说每个定义都像是选择DOM节点的机器，选中的是满足选择器条件的节点。如下：
#nav1{
style;
}
上面的样式定义会应用于那些id为nav1的节点，就是因为#表示id选择，nav1表示被选中的id的值。另外点表示class选择，标签名则直接选择节点标签，但都是起到选择节点的作用，然后将CSS样式应用于被选择的节点上。

而加上空格并再给一个选择器时，如下：
#nav1 .menu {
float: left; width: 670px;
}
相当于在结果中查找。假设你的html页面中有两个导航条，分别：

• 导航1

• 导航2

.menu{
font-size:13px;
line-height:13px;
list-style:none;
padding-left:5px;
margin-right:20px;
float:left;
}
这两个导航有很多共通的定义，你已经定义在了上面的.menu中。你希望导航1的字体颜色为红色，导航2的字体颜色为绿色，在不增加额外类的情况下，如果简单的定义如下样式：
.menu{
color:red;
}
显然两个导航的字体都会是红色，定义为绿色亦然。那该怎么办呢？这个时候，你首先要明白，你只是想要导航1下的导航颜色为红色，即id为nav1的ul下的li的字体颜色为红色，那么，id为nav1下的class为menu的节点该怎么选中呢？
就是上面的空格分开的样子：
#nav1 .menu{
color:red;
}
#nav2 .menu{
color:green;
}
这样，导航1的字体颜色就是红色，而导航2的字体颜色就是绿色，同时也没有添加额外的类定义。

同样的，如果你希望所有的div下的class为border的节点都有一个边框，可以如下定义：
div .border{
border:1px solid black;
}
由上面的定义带来一个新的问题，上面的div和.border之间是有一个空格的，所以表示的是div下面class为border的节点。但如果不小心漏写了空格会怎么样呢？如上定义就变成了下面的样子：
div.border{
border:1px solid black;
}
一个空格的差别，这里选中的节点就与上面带空格的有很大区别。这个选中的是那些class为border的div，即类似于如下的div：

而之前带空格的则选中下面这个div中的结点，但不包含这个div本身：

上面的p标签和a标签都会被带空格的样式所修饰，而div却不会，除非这个div的外面还包着一层div。

.menu,#nav2

你注意，它们中间是豆号，是一种并列式的简写。

比如
.menu {color:#000;}
#nav2 {color:#000;}

可以写成
.menu,#nav2 {color:#000;}

这样你可以理解了吧。至于前面和后面的该怎么写就这么写。所以你发的这个代码没有#nav2的引用仍然有效是正常的。

，表示并列关系；
中间加一空格表示后代选择符；

上述的可解释为选择ID值为nav1下的带class值为menu的元素，以及选择ID值为nav2下的带class值为menu的元素
然后赋予CSS属性

另：你给的例子，他写的有些繁杂了，标签运用的不到位，按那例子是绝对够不着页面重构工程师这职位的