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>