拖了好久的教程终于等到授课结束了，便开始马不停蹄的准备更新~~~
今年自学了很多关于UI类的内容，在审美上又有了一些提高，以后做的案例更美美哒！
一、CSS3新增伪类选择器
在CSS1版本的时候，几乎都是:hover的天下，在CSS2版本的时候，增加了:focus这个常用的，CSS3版本就增加了:nth-child这种必杀技了。
在这里就只介绍CSS2和CSS3新增的伪类选择器。
| 选择符 | 实例 | 描述 | 版本 |
| E:focus | input[type='text']:focus | 设置元素在成为输入焦点（该元素的onfocus事件发生）时的样式。 | CSS2 |
| E:first-child | li:first-child | 匹配父元素的第一个子元素E | CSS2 |
| E:last-child | li:last-child | 匹配父元素的最后一个子元素E | CSS3 |
| E:only-child | li:only-child | 匹配父元素仅有的一个子元素E | CSS3 |
| E:nth-child(n) | li:nth-child(2n) | 匹配父元素的第n个子元素E。 | CSS3 |
| E:nth-last-child(n) | li:nth-last-child(2) | 匹配父元素的倒数第n个子元素E | CSS3 |
| E:first-of-type | #content p:first-of-type | 匹配同类型中的第一个同级兄弟元素E | CSS3 |
| E:last-of-type | #content p:last-of-type | 匹配同类型中的最后一个同级兄弟元素E | CSS3 |
| E:nth-of-type(n) | #content p:nth-of-type(2n+1) | 匹配同类型中的第n个同级兄弟元素E | CSS3 |
| E:only-of-type | #content p:only-of-type | 匹配同类型中的唯一同级兄弟元素E | CSS3 |
| E:nth-last-of-type(n) | #content p:nth-last-of-type(5) | 匹配同类型中的第n个同级兄弟元素E,但是从最后一个子元素开始计数 | CSS3 |
| E:empty | td:empty | 匹配没有任何子元素（包括text节点）的元素E | CSS3 |
| E:checked | input[type='checkbox']:checked | 匹配用户界面上处于选中状态的元素E。(用于input type为radio与checkbox时) | CSS3 |
| E:enabled | input[type='button']:enabled | 匹配用户界面上处于可用状态的元素E | CSS3 |
| E:disabled | input[type='button']:disabled | 匹配用户界面上处于禁用状态的元素E | CSS3 |
| E:target | #list:target | 匹配相关URL指向的E元素,超链接的URL地址和锚点一样。比如<a href="#list">点击</a> <div id="list"></div> | CSS3 |
| :not(s) | :not(h1) | 选择非s元素的每个元素 | CSS3 |
还有好些不常用到的，我就不列举了，貌似伪类选择器是最多家庭成员的一种选择器了。
二、为什么叫伪类？
提到“伪”字，你想到了什么？“假的”，“汪精卫伪政府”，“不存在的”······
我的理解就是：本身不存在，只有在特定的情况下才会被触发的状态，可以用css去修饰这个状态下的对象。
这些伪类有不同的用处，有些是关于状态的，比如:hover，:focus，有些是关于结构位置的，比如:nth-child(n)，有些是关于UI样式的，比如:checked等。
下面通过一些小案例来解释常用的伪类选择器。
三、案例部分
1、:focus 当对象获得光标的时候，经常用在表单上，比如当光标在搜索表单里时，让单行文本框变化边框颜色和长度。
See the Pen :focus by zhaolanzhen (@mrszhao) on CodePen.
2、nth-child(n)相关的子元素位置选择器。比如li:nth-child(2)，选择的是第二个li，这个前提条件是li必须是某个父元素下的子元素，而且必须处于父元素下面的第二个位置。当然ul li是一种结构体，ul下面只能是li的子元素，所以这样写不会有问题。
:nth-child(n)这里的n是一个表达式。
2.1 2n表示选择偶数，可以用even代替。比如:nth-child(2n)，:nth-child(even)。
2n+1表示奇数，可以用odd表示，比如:nth-child(2n+1)，:nth-child(odd)。
比如做一个斑马条纹的表格。
See the Pen :nth-child(2n) by zhaolanzhen (@mrszhao) on CodePen.
2.2 通过:nth-child(n+length)，可以选择length个长度以后的对象。
比如:nth-child(n+5)表示选择第5个(包含5)以后的对象，n从0开始，这里必须是n+5的表达式，换成5+n都不行的。
:nth-child(-n+length)，可以选择length个长度以前的对象。这里的表达式必须是-n+length，不能调换顺序。
比如:nth-child(-n+3)，可以选择第3个(包含3)以前的对象。
See the Pen :nth-child(n+length) by zhaolanzhen (@mrszhao) on CodePen.
:nth-last-child(n)表示倒数，n的表达式和:nth-child(n)的表达式一样的。
比如选择倒数从第五个开始和选择倒数三个。
See the Pen :nth-last-child(n+length) by zhaolanzhen (@mrszhao) on CodePen.
2.3 通过:nth-child(αn+β)这种表达式可以设置一组一组的元素样式。α表示多少个对象为一组，β表示这一组的第几个元素。
比如:nth-child(5n+1)，表示五个为一组，一组内的第一个元素。
比如多彩标签案例。
See the Pen :nth-child(αn+β) by zhaolanzhen (@mrszhao) on CodePen.
3、关于:nth-of-type(n)是为了弥补:nth-child(n)的不足的。
比如p:nth-child(3)选择第三个段落，但是也许p的父元素下面还有h标题的子元素，那么第三个元素可能就不是p，而是标题。这时候用:nth-child(n)就选不到了，只能用同类型子元素选择器:nth-of-type(n)了。
See the Pen nth-of-type(n) by zhaolanzhen (@mrszhao) on CodePen.
4、关于UI类的伪类选择器
:enabled，:disabled，:checked等基本都用于表单对象。
比如前段时间沸沸扬扬的支付宝年度账单，就因为默认勾选了同意数据引用协议，被一个律师狠狠的diss了一把。
所以我们可以设计为没有勾选协议的时候按钮不可用，勾选了之后按钮可用。
See the Pen :disabled by zhaolanzhen (@mrszhao) on CodePen.
5、:target选择器
这个选择器和锚点感觉有点像，就是指哪儿打哪儿。
See the Pen :target by zhaolanzhen (@mrszhao) on CodePen.
6、:not()选择器
这个选择器就是筛选对象的，把不需要的对象筛出去。:not() 这个()里面的必须是一个能选择对象的选择器。
比如选择input控件，把密码类型的筛出去不要。input:not([type='password'])
比如选择所有的li，把最后的一个li筛出去不要。li:not(:last-child)
See the Pen :not() by zhaolanzhen (@mrszhao) on CodePen.
写了两天才弄完，用codepen的好处就是可以直接查看效果，还可以手动实验，很棒，不知道童鞋们是否习惯呢？喜欢记得点赞或留言。
发表评论:
◎请发表你卖萌撒娇或一针见血的评论，严禁小广告。