1.
:link 向未被访问的链接添加样式
:visited 向已被访问的链接添加样式
:hover 当鼠标悬浮在元素上方时，向元素添加样式
:active 向被激活的元素添加样式(被点击)
以上四种伪类应用于超链接时，a:hover必须在a:link和a:visited之后，a:active必须在a:hover之后，a:link和a:visited两者的顺序没有规定
1.1 超链接:
style>a:link{ color:red; }a:visited{ color:green; }a:hover{ color:blue; }a:active{ color:yellow; }style>a href=#>pmx-cnblogsa>
1.2 div
style>div{ width:100px; height:100px; background-color:red; border:3px solid blue; overflow:hidden; transition:width 1s,height 2s,background-color 1s,line-height 2s,font-size 2s; line-height:100px; text-align:center;}div:hover{ background-color:green; width:300px; height:300px; line-height:300px; font-size:2em}div:active{ color:yellow;}style>div>this is divdiv>
正常状态:
鼠标移到div上时的样子:
鼠标左键按下后得样子:
2. :first-child
p:first-child选择作为某个元素的第一个子元素的p元素，而不是选择p元素的第一个子元素
style>#mydiv > p:first-child{ background-color:#3c6; }style>body> p>p8p> div id='mydiv' style='width:300px;height:300px;overflow:auto'> p>p1p> p>p2p> p>p3p> div> p>p4p> p>p5p> div> div> p>p6p> p>p7p>body>
p1作为mydiv的第一个子元素被选中
3. :focus
向获得焦点的元素添加特殊样式，比如按钮被点击后，文本框输入文本
style>input:focus{ background-color:yellow; }style>input type='text' value=/>
4. :lang
向带有指定lang属性的元素添加样式
style>:lang(zh){ color:red; }style>p lang=zh>p7p>
5. :target
:target伪类和超链接有关，当我们希望打开页面或者单击按钮定位到页面中某个元素时，常常是这样的
a href=#jump>jump this is paragraphp>
:target就是捕获点击超链接后，定位到的元素，在:target里面的css代码都是控制这个捕获到的元素的。
doctype html>html lang=en>head> meta charset=utf-8> title>documenttitle> style> :target{ background-color:red; } style>head>body> a href=#jump1>jump to 1a> a href=#jump2>jump to 2a> p id=jump1>this is paragraph1p> p id=jump2>this is paragraph2p>body>html>
点击jump to 1时，paragraph1变红。
点击jump to 2时，paragraph2变红
:target表示所有被定位到的元素，背景色改变。如果我们想让paragraph1单独变红，可以这样:
style> #jump1:target{ background-color:red; } style>
案例:
doctype html>html lang=en>head> meta charset=utf-8> title>documenttitle> style> .tab_list{ position: relative; margin:50px; min-height: 200px; } .tab_content{ position: absolute; width:600px; height:170px; padding:15px; border:1px solid #91a7b4; border-radius:3px; box-shadow:0 2px 3px rgba(0,0,0,0.1); font-size:1.2em; line-height:1.5em; color:#666; background-color: #fff; overflow: hidden; } .tab_menu{ position: absolute; top:100%; list-style-type: none; margin:0; padding:0; } .tab_menu li{ display:inline-block; } .tab_menu a{ text-decoration: none; display:block; padding:5px; font-size:12px; font-family:楷体; color:#333; border:1px solid #91a7b4; border-radius: 0 0 5px 5px; background-color:#e3f1f8; margin-right:10px; } :target{ z-index:10; } style>head>body> div class=tab_list> ul class=tab_menu> li>a href=#tab1>标签一a>li> li>a href=#tab2>标签二a>li> li>a href=#tab3>标签三a>li> ul> div id=tab1 class=tab_content>欢迎加设计达人q群：50063010br/> 设计达人以原创和分享一些高质量的设计文章为主，希望喜欢！ div> div id=tab2 class=tab_content> p>本tab切换效果纯css3制作，无任何javascriptp> 最新q群：50063010br/> 爱设计，爱分享——设计达人（a href=http://www.shejidaren.com>http://www.shejidaren.coma>） div> div id=tab3 class=tab_content> p>高质量设计文章分享平台p> p>欢迎加设计达人q群：50063010br />a href=http://www.shejidaren.com/>设计达人a>以原创和分享一些高质量的设计文章为主，希望喜欢p> div> div>body>html>