拖了好久的万博manbext备用网址终于等到授课结束了，便开始马不停蹄的准备更新~~~

今年自学了很多关于UI类的内容，在审美上又有了一些提高，以后做的万博manbext3.0首页登录更美美哒！

一、CSS3新增伪类选择器

在CSS1版本的时候，几乎都是:hover的天下，在CSS2版本的时候，增加了:focus这个常用的，CSS3版本就增加了:nth-child这种必杀技了。

在这里就只介绍CSS2和CSS3新增的伪类选择器。

还有好些不常用到的，我就不列举了，貌似伪类选择器是最多家庭成员的一种选择器了。

二、为什么叫伪类？

提到“伪”字，你想到了什么？“假的”，“汪精卫伪政府”，“不存在的”······

我的理解就是：本身不存在，只有在特定的情况下才会被触发的状态，可以用css去修饰这个状态下的对象。

这些伪类有不同的用处，有些是关于状态的，比如:hover，:focus，有些是关于结构位置的，比如:nth-child(n)，有些是关于UI样式的，比如:checked等。

下面通过一些小万博manbext3.0首页登录来解释常用的伪类选择器。

三、万博manbext3.0首页登录部分

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)，表示五个为一组，一组内的第一个元素。

比如多彩标签万博manbext3.0首页登录。

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的好处就是可以直接查看效果，还可以手动实验，很棒，不知道童鞋们是否习惯呢？喜欢记得点赞或留言。