CSS伪类有比较实用的用处，可以使程序员少些一些js，而实现特定的效果。
w3cschool中，伪类有如下的几种：
:active 向被激活的元素添加样式。
:focus 向拥有键盘输入焦点的元素添加样式。
:hover 当鼠标悬浮在元素上方时，向元素添加样式。
:link 向未被访问的链接添加样式。
:visited 向已被访问的链接添加样式。
:first-child 向元素的第一个子元素添加样式。
:lang 向带有指定 lang 属性的元素添加样式。
本文说一下focus伪类，因为比较实用。
比如某些场合，需要对文本框输入时，背景色变色。用jquery固然可以写。通过onfocus事件绑定特定的执行代码。
此时用focus伪类则效率高了很多，也不需要写额外的JS代码。特别对于动态生成的表单，也不需要使用jquery的live方法了。注意，使用伪类的时候，务必把DOCTYPE写完整，不然会不起作用。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title></title> <script src="http://code.jquery.com/jquery-1.7.2.min.js" type="text/javascript"></script> <style type="text/css"> .testclass { border: 1px solid black; width: 50px; } .testclass:focus { background-color: red; } </style> <script type="text/javascript"> $(function () { $("#btn").click(function () { $("body").append("<input class=\"testclass\" type=\"text\" />"); }) }); </script> </head> <body> <input id="btn" type="button" value="add textbox" /> <input class="testclass" type="text" /> </body> </html>
visibility: hidden和display: none的区别在于，隐藏后，是否还占着位子。
visibility隐藏后，只是视觉上消失了，留出的空间还是以空白的形式占用了。
display,隐藏后，就好像真的消失了。
看下面的例子。消失后，文字的位置。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title></title> <script src="http://code.jquery.com/jquery-1.7.2.min.js" type="text/javascript"></script> <style type="text/css"> .use_visibility { visibility: hidden; } .use_diplay { display: none; } </style> <script type="text/javascript"> $(function () { $("#btn_use_visibility").click(function () { $("#txt_use_visibility").toggleClass("use_visibility"); }); $("#btn_use_diplay").click(function () { $("#txt_use_diplay").toggleClass("use_diplay"); }); }); </script> </head> <body> <input id="btn_use_visibility" type="button" value="use_visibility" /> <input id="btn_use_diplay" type="button" value="use_diplay" /><br/> <input id="txt_use_visibility" type="text" />文字 <br/> <input id="txt_use_diplay" type="text" />文字 </body> </html>
，如需转载请自行联系原作者
