新增的伪类有:“:first-child”、“:last-child”、“:nth-child(n)”、“:link”、“:visited”、“:active”、“:hover”、“:focus”、“:not()”等。

本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。
结构性伪类选择器
:first-child 第一个子节点、:last-child 最后1个子节点、:nth-child(n) 第n个子节点、:nth-last-child(n) 倒数第n个子节点、:only-child 唯一的子节点
:nth-child(n)、:nth-last-child(n)还有一些特殊用法,通过括号内的东西来限制选择:
1、odd/event:第奇数个/偶数个元素
立即学习“前端免费学习笔记(深入)”;
2、xn+y:第xn+y个元素
话不多说上代码,下面是对li标签设置伪类选择器
- oaaaaaaaaaaa
- obbbbbbbbbbb
- occccccccccc
- odddddddddd
- oeeeee
- saaaaaa啊飒飒

可以看到不同的效果
UI元素状态伪类选择器
:link(未被访问前的元素(通常只能是超链接))、:visited(已被访问过的元素(通常只能是超链接))、:active(正在被访问的元素即鼠标点击与释放之间(通常只能是超链接))、:hover(鼠标悬停状态的元素)、:focus(已得到焦点的元素)
aaa
一开始是这样的

网胜B2B电子商务系SP6.3普及版详细说明:从2008年5月至今,网胜科技B2B产品始终坚持免费,开源的原则,为大家提供强大免费易用的B2B管理系统。一、更新说明:1. 新增会员投搞功能:可以选择哪些新闻分类可以由会员来发布,将这些信息由后台进行审核,并显示到前台,同时还可以由出一些奖励积分。来增加网站的粘合度。2. 前台增加了汉字验证码 (三种方式 显示,分别为汉字输出验证码和汉字水印图片验证
当我们点击超链接
点击后

接下来看文本框,当我们把焦点放在文本框上(也就是文本框的可输入状态),获得了:focus中的样式

再看按钮,当鼠标悬停在按钮上,获得:hover中的样式(因为作者要截图,一截图就截不到光标了,所以图中看不到光标)

:not()伪类选择器相当于两个选择器做减法,如 li:not(#a){}修饰符合li选择器但是不符合id为a的所有元素块
推荐学习:css视频教程










