1.以前用的伪类选择器:
:hover
:link
:active
:visited
CSS3中新增的伪类选择器:
1) E:first-child 表示E的父元素的第一个子元素 E:(Elements)元素
2)E:last-child 表示E的父元素的最后一个子元素
3):root 表示文档的根
4)E:nth-child(n) 表示E的父元素的第n个子元素
5)E:nth-lastchild(n) 表示E的父元素的倒数第n个子元素
示例代码如下:
1)first-child
/*li的父元素(ul)的第一个子元素*/ li:first-child{ color: #9abc4d; font-size: 18px; font-weight: bold; }
<ul id="CN"> <li>芈月传</li> <li>甄嬛传</li> <li>甜蜜蜜</li> </ul> <ul id="US"> <li>老友记</li> <li>生活大爆炸</li> <li>国务卿夫人</li> </ul> <ul id="UK"> <li>神探夏洛克</li> <li>唐顿庄园</li> </ul>运行效果:
2)last-child: (HTML代码与上面保持不变,CSS3样式如下所示:)
/*li的父元素(ul)的最后一个子元素*/ li:last-child{ color: #bc1011; font-size: 18px; font-weight: bold; }
运行结果如下:
3)第n个子元素:(当n为2的时候)
/*第2个子元素*/ li:nth-child(2){ color: #635abc; font-size: 18px; font-weight: bold; }运行效果如下:
4)倒数第n个元素(n=3为例)
/*倒数第n个元素*/ li:nth-last-child(3){ color: #ffc02f; font-size: 18px; font-weight: bold; }运行效果:
5)E:empty 不包含任何内容的元素
E:enabled 表示匹配可以用的元素
E:disabled 匹配不可用的元素
E:checked 匹配选中的元素 (:checked 选择器匹配每个已被选中的 input 元素(只用于单选按钮和复选框)。)
注意:只有 Opera 支持 :checked 选择器。
综合示例代码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>其他不太常用的</title> <style> :enabled{ border: #f552ff solid 3px; } :disabled{ color: #7fff54; font-size: 16px; } :checked{ background-color: #9361ff; /*border: #ff662e solid 3px;*/ } </style> </head> <body> <!--代码对其:Ctrl+Alt+L --> <input type="text" name="username"><br> <input type="text" disabled value="不可用"><br> <input type="radio" checked="checked" name="gender">单选按钮 </body> </html>运行结果:(Chrome浏览器的运行结果)