首页>前端教程>CSS教程

CSS3第三课:伪类选择器,为什么有一个伪字?

拖了好久的教程终于等到授课结束了,便开始马不停蹄的准备更新~~~

今年自学了很多关于UI类的内容,在审美上又有了一些提高,以后做的案例更美美哒!

一、CSS3新增伪类选择器

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

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

选择符实例
描述版本
E:focusinput[type='text']:focus设置元素在成为输入焦点(该元素的onfocus事件发生)时的样式。CSS2
E:first-childli:first-child匹配父元素的第一个子元素ECSS2
E:last-childli:last-child匹配父元素的最后一个子元素ECSS3
E:only-childli:only-child匹配父元素仅有的一个子元素ECSS3
E:nth-child(n)li:nth-child(2n)匹配父元素的第n个子元素E。CSS3
E:nth-last-child(n)li:nth-last-child(2)匹配父元素的倒数第n个子元素ECSS3
E:first-of-type#content p:first-of-type匹配同类型中的第一个同级兄弟元素ECSS3
E:last-of-type#content p:last-of-type匹配同类型中的最后一个同级兄弟元素ECSS3
E:nth-of-type(n)#content p:nth-of-type(2n+1)匹配同类型中的第n个同级兄弟元素ECSS3
E:only-of-type#content p:only-of-type匹配同类型中的唯一同级兄弟元素ECSS3
E:nth-last-of-type(n)#content p:nth-last-of-type(5)匹配同类型中的第n个同级兄弟元素E,但是从最后一个子元素开始计数CSS3
E:emptytd:empty
匹配没有任何子元素(包括text节点)的元素ECSS3
E:checkedinput[type='checkbox']:checked
匹配用户界面上处于选中状态的元素E。(用于input type为radio与checkbox时)CSS3
E:enabledinput[type='button']:enabled匹配用户界面上处于可用状态的元素ECSS3
E:disabledinput[type='button']:disabled匹配用户界面上处于禁用状态的元素ECSS3
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的好处就是可以直接查看效果,还可以手动实验,很棒,不知道童鞋们是否习惯呢?喜欢记得点赞或留言。


7
保存到:

相关文章

Top