关于CSS类名的命名方式大致有三种：

• 1. 下划线，即：class=”main_nav”
• 2. 减　号，即：class=”main-nav”
• 3. 驼峰式，即：class=”mainNav”

三种方法各有利利弊，我大概总结了下面几点：

1.下划线

优点：和程序兼容性好，因为所有程序语言里的变量命名都可以用下划线。

缺点：生硬难看，多余一个字符。

2.减号

优点：与CSS代码原生匹配，比如：text-align:center; 视觉上有一致性，也很美观。

缺点：用减号分割的字符一般的文本编辑器会认为它是两个字符，从而影响“双击选中”操作，另外在程序里减号是变量的运算符，可能会造程序书写困难。

3.驼峰式

优点：符合编程语言命名规范，节省1个字节

缺点：XHTML规定都是小写，用某些代码整理工具可能会误把类名全部转化成小写

大家如果觉得有什么要补充的可以讨论下，个人还是喜欢减号多一点。因为比较原生嘛！

涉及到下拉菜单制作的方法最核心的还是鼠标移动到上面的处理。下面是调用wp_nav_menu()函数后的HTML结构(做解释用)：

<div class="menu-菜单名-container">
	<ul class="menu" id="menu-菜单名">
		<li class="menu-tiem">
			<a href="#">菜单项目1</a>
			<ul class="sub-menu">
				<li><a href="#">子菜单项目1-1</a></li>
				<li><a href="#">子菜单项目1-2</a></li>
				...
			</ul>
		</li>
		<li><a href="#">菜单项目2</a></li>
	</ul>
</div>

这是一种很经典很优雅的导航HTML代码，在IE6以上以及标准浏览器中要实现下拉效果只用一句CSS就能搞定。比如下面的示例代码(可自定义)：

.menu li a { float:left; height:35px; width:100px;/*菜单高度与宽度*/ line-height:35px; text-align:center;  color:#ccc; text-align:center; }
.menu li { float:left; height:1%; background:#000; }
.menu-sjys-container { position:absolute; z-index:1000;}
.menu li ul li { clear:both; border-bottom:1px solid #333; border-right:none;  }
.menu-item  { position:relative; border-right:1px dotted #333; }
.menu-item:hover>.sub-menu{ display:block; /*下拉效果只用到这一段代码*/ }
.sub-menu { position:relative; left:1px; margin:0; z-index:101; display:none;/*一般情况下隐藏子菜单*/ }
.sub-menu ul.sub-menu { position:absolute; left:100px; top:0;}

上面的这两段代码在IE6以上以及标准浏览器中表现的很完美，原因是IE6这种老浏览器还不支持任何标签的伪类属性，即htmlTag:hover。所以为了兼容我们又不得不用JS来实现(纯CSS亦可)。我大概写了一段JS可以勉强达到效果，但不知道为什么在IE中切换菜单时会有闪动的感觉，这个得求教JS高手了哈。

<!--[if lt IE 7]> <script type="text/javascript">
//<![CDATA[
/*导航联动效果*/
(function () {
	function getElementsByClass(searchClass, node, tag) {
		var classElements = new Array();
		if (node == null) node = document;
		if (tag == null) tag = '*';
		var els = node.getElementsByTagName(tag);
		var elsLen = els.length;
		var pattern = new RegExp("(^|\\s)" + searchClass + "(\\s|$)");
		for (i = 0, j = 0; i < elsLen; i++) {
			if (pattern.test(els[i].className)) {
				classElements[j] = els[i];
				j++;
			}
		}
		return classElements;
	}
	function hoverSubMenu(node, flag) {
		node.onmouseover = function () {
			var subMenu = getElementsByClass("sub-menu", this)[0];
			if (subMenu) {
				subMenu.style.display = "block";
			}
		}
		node.onmouseleave = function () {
			var subMenu = getElementsByClass("sub-menu", this)[0];
			if (subMenu) {
				subMenu.style.display = "none";
			}
		}
	}
	var menuItems = getElementsByClass("menu-item");
	for (var i = 0; i < menuItems.length; i++) {
		hoverSubMenu(menuItems[i], i);
	}
})();
//]]>
</script>
<![endif]—>

问题应该出在不同浏览器对JS中onmouseover事件处理的方法上。但我还没有弄清楚，希望有“大湿”指导下哈。

问题在于W3C对onmouseout事件处理方法不是很理想，微软IE支持的onmouseleave方法确可以正常工作。

正题：

在我们写CSS时遇到两个选择器不同规则相同的情况大多会用到多元素选择器，因为这样在某种情况下会少写一条相同的规则，比如：

#display-block{ display:block; }
.display-block{ display:block; }

合并为：

#display-block, .display-block{ display:block; }

这个地球人都知道？往下看…
毫无疑问上面这种方法大大的精简了代码，但是在实际操作中我发现并非所有的情况都如我所愿。比如：

#display-block{ display:block; color:red; }
.display-block{ display:block; color:black; }

合并为：

#display-block{ color:red; }
.display-block{ color:black; }
#display-block, .display-block{ display:block; }

对比一下这两段代码，你会发现下面合并过的比上面没合并的多了大约18个字符，换句话说就是合并并没有达到精简代码的效果，反而比原来的还长了。

总结一：当某选择器有单一CSS规则时，用分组选择器会达到精简代码的作用。

再来看一种情况：

#f1{ display:block; color:red; }
#f2{ display:block; color:black; }

合并为：

#f1{ color:red; }
#f2{ clor:black; }
#f1,#f2{ display:block; }

对比一下合并后大概节省了7个字符。

总结二：当N个（短）选择器下含有至少1条相同CSS规则，用分组选择器优化其中某条规则时可能会达到效果。

能否达到效果要看其中的“短”和“某条”的字符长度。用个小学生方程吧：设它俩字符长度为X，Y 那么：

当 Y*N>X*N+(N-1)+2+Y 时，总结二成立。否则不成立。

解释：

• N-1表示分组选择器之间的“,”
• 2表示多出来的“{}”

好了！一个简单的结论出来了哈。不过貌似没多大意义，也只做折腾罢了。匆深究^!^

附：CSS森林博客作者制作的CSS压缩工具：mergeCSS

CSS Tab Designer操作简单，很容易上手。主界面共三列，如图：

Items列为你要添加的导航条项目。点击“+”就可以添加。

Tab Styles为导航条的样式，这个软件给我们提供了好多样式，你可以任意选择一款你喜欢的。

Preview为最终效果预览图，如果感觉不错就可以点击“Generate HTML & Images”导出html和素材文件。

OK！有了Tab Designer你就能轻松搞定一切的导航条了。

注意：如果导航条内容有中文的话请在Preview列中点右键选择网页编码为”GB2312”即可正常预览。

无意中发现一个很不错的网站，应该是一位叫Spiffy的设计师做的网页。该网页可以根据你的需要自动生成纯CSS圆角代码。大家有兴趣的可以去看看哦。

地址：http://www.spiffycorners.com/index.php

小提示：要在他给出的CSS代码中额外加上一条重置代码如*{ margin:0; padding:0 }才行，要兼容IE的话要给”class name”加上overflow:hidden哦。.

先看最终效果图：

由于是纯CSS实现的在载入速度和效率方面应该是最快的，所以很广泛的应用于信息类网站。这次就不多解释了，直接上效果：

查看效果与源文件

以前也有说到过一个关于火狐的一个制表符bug，可能大家没看见过(被我del了)。今天主要看看火狐的注释bug。情况是这样的：

在css的style标签中如果有html注释并且后面紧跟一个空格那么在火狐中就会使注释下面的样式失效，比如以下这段代码：

<style type="text/css>
<!--  1.这里最好不要放注释 -->
*	{ margin:0; padding:0;}
body{ font:12px Verdana, Geneva, sans-serif; color:#666; padding:10px;}
<!--  2.这里最好不要放注释 -->
p	{ color:red; }
</style>

如果这段代码放在火狐中浏览的话所有p标签的文字都会是默认颜色而不是红色。如果你用的也是火狐

点这里看效果

解决方法：

在样式表中用CSS注释(/*注释*/)而不是用html注释(<!–注释–>)

总结一下通用的语法是这样的（注意红色部分）：

<!--[ if rang IE no]>
......
<![ endif ]-->

“rang”的取值有以下几种：

• lie: Less than or equal to的缩写，表示小于或者等于
• lt: Less than的缩写，表示小于
• Gte: greater than or equal to的缩写，表示大于或者等于
• Gt: greater than的缩写，表示大于
• !: 不等于，编程语言中逻辑非的符号

“no”即表示IE的具体版本号，如：5,6,7,8

“……”省略号表示在以上条件下显示出来的html代码，如:

<!--[ if lte IE 6]>
<style type="text/css">
	body{ text-align:center; }
</style>
<![ endif ]-->

这条代码表示：在IE6以下版本的浏览器中body元素的文字对齐方式为居中。

1.盒模型代码简写

关于边框如：

• border-color:#f00;
• border-with:1px;
• border-style:solid

可以简写成：

border:1px solid #f00;

关于margin或padding如：

• margin-top:10px;
• margin-left:15px;
• margin-bottom:16px;
• margin-right:17px;

可以简写成：

margin: 10px 17px 16px 15px; /*顺序为上右下左，如果像素值一样只写一条即可*/

注意：如果你看见只有三个声明如：margin:1px 2px 3px 则表示上间距为1px，左右为2px，下为3px.

1.列表和背景简写

关于列表如：

• list-style-type: circle;
• list-style-image:url(arrow.gif);
• list-style-position:inside;

可以简写为：

list-style:circle url(arrow.gif) inside;

关于背景：

background-color:#ff0000;

background-image:url(arrow.gif);

background-position:left top;

background-repeat:repeat-x;

可以简写为：

background:#ff0000 url(arrow.gif) left top repeat-x;

关于送颜色的红缩写相信大家应该知道吧：诸如：#ffffff,#ff0000,#112233我们可以分别写成#fff,#f00,#123。

关于字体的缩写如：

• font-style:italic;
• font-weight:bold;
• font-size:12px;
• line-height:14em;
• font-family: “宋体” ，verdana;

可以简写为：

font:italic bold 12px/14em “宋体” ，verdana;

需要特别注意的是：字体样式简写的时候必须得有“字体大小”和“字体家族”两项定义，其它可省略。

当你鼠标移动上去的时候图片会由黑白变成彩色的效果。刚看风的时候还以为用了js或者jquery呢。再用firebug一看就明白了：用到的只是一个简单的css sprite技术。

步骤是这样的：

1.先把你想要做的图片放到PS里面进行去色处理-“图像–调整–去色”或者“ctrl+shift+u”

2.将此图和原图片整合成上下两张的图片，如下图：

3.下一步写下代码：

xhtml代码：

<div id="box"> <a href="#"> <span></span> </a> </div>

CSS代码：

a {
	float:left;
}
#box span {
	border:3px solid #ccc;
	display:block;
	width:170px;
	height:120px;
	background:url(flower.jpg) center top no-repeat;
}
#box a:hover span {
	background:url(flower.jpg) center -120px no-repeat;
}

查看效果及代码