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>
本文出自 “一隻部落格” 部落格，請務必保留此出處http://cnn237111.blog.51cto.com/2359144/956918
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
