CSS伪类有比较实用的用处,可以使程序员少些一些js,而实现特定的效果。

w3cschool中,伪类有如下的几种:
:active  向被激活的元素添加样式。
:focus  向拥有键盘输入焦点的元素添加样式。 
:hover 当鼠标悬浮在元素上方时,向元素添加样式。 
:link 向未被访问的链接添加样式。
:visited 向已被访问的链接添加样式。
:first-child 向元素的第一个子元素添加样式。
:lang 向带有指定 lang 属性的元素添加样式。
 
本文说一下focus伪类,因为比较实用。
比如某些场合,需要对文本框输入时,背景色变色。用jquery固然可以写。通过onfocus事件绑定特定的执行代码。
此时用focus伪类则效率高了很多,也不需要写额外的JS代码。特别对于动态生成的表单,也不需要使用jquery的live方法了。注意,使用伪类的时候,务必把DOCTYPE写完整,不然会不起作用。
 



    
    
    
    


    "btn" type="button" value="add textbox" />
    "testclass" type="text" />


visibility: hidden和display: none的区别在于,隐藏后,是否还占着位子。
visibility隐藏后,只是视觉上消失了,留出的空间还是以空白的形式占用了。
display,隐藏后,就好像真的消失了。
看下面的例子。消失后,文字的位置。



    
    
    
    


    "btn_use_visibility" type="button" value="use_visibility" />
    "btn_use_diplay" type="button" value="use_diplay" />
"txt_use_visibility" type="text" />文字
"txt_use_diplay" type="text" />文字