CSS伪类与伪元素的区别及用法

伪类与伪元素统称为伪选择器。

首先举两个简单地例子看一下区别

伪类的:first-child的举例

ex01.jpg

我们如果想要给p中的第一个span更改颜色,通常的做法就是向他添加一个类,然后定义其样式。

代码如下:

ex02.jpg

ex03.jpg

这里我们更换一种方法,不用添加类

我们直接设置第一个<span>的:first-child伪类来为它添加样式。

ex04.jpg            ex05.jpg

这个时候,被修饰的<span>元素依然处于文档树中,以上两个方法的效果都是相同的。


下面来看伪元素的用法

伪元素的::first-letter的用法

同上一个例子的代码

ex06.jpg

在这一段落中我们如果想要给第一个字添加样式,我们可以用再使用一个span包裹这个字,并为其设置样式。

代码如下:

ex07.jpg

ex08.jpg

如果我们不包裹它,我们可以用到::first-letter来为这一段的首字母设置样式。

ex09.jpg            ex10.jpg

这样的话就好像创建了一个虚拟的span并添加了样式,但是实际在文档树中并不存在这个span,以上两个方法的效果都是相同的。


关于伪类和伪元素使用单冒号还是双冒号及注意事项

在CSS3的标准中为了区分伪类和伪元素,规定伪类使用单冒号(:),伪元素使用双冒号(::)。

但是在此之前都是使用单冒号(:)的,所以伪元素既可以使用双冒号(::),同时也支持单冒号(:)的写法,但在考虑到浏览器的兼容问题下,有部分浏览器不支持双冒号的写法,因此设置的样式不会生效,也可以依据个人习惯,单、双冒号都是正确的写法。

伪类只能使用单冒号(:)写法。

注意

使用伪类是可以叠加的使用的,可以叠加多个只要不互斥,例:

ex11.jpg

使用伪元素就相对严格很多,它只能在一个元素上出现一次,而且只能在末尾出现,像下面这样的写法样式就不会生效。

ex12.jpg    ex13.jpg


简述伪类选择器的一些用法(其中分为5类)

1. 状态伪类

:link

链接的正常状态,选择那些尚未被点过的链接,这个伪类也可以省略,直接在链接本身定义样式

:hover

用户指针悬停时生效,不只可以用于链接

:visited

选择点击过的链接

:active

选择被鼠标指针或触摸操作激活的元素,也可以通过键盘来激活,只发生在鼠标按下到被释放的这段时间里

【上面四个注意顺序,“LOVE”可以方便记忆,第一个一定是link,第四个一定是avtive,hover和visited顺序可以随意】

:focus

用于选择已经通过指针设备、触摸或键盘获得焦点的元素,在表单里使用得非常多

2. 结构化伪类

:not()

取反伪类,它通过括号接受一个参数,一个“选择符”。实际上,这个参数也可以是另一个伪类。这个伪类可以连缀使用,但不能包含别的:not选择符。

:first-child

选择父元素的第一个子元素

:last-child

选择父元素的最后一个子元素

:first-of-type

选择父容器内任意类型子元素的第一个元素

:last-of-type

选择父容器内任意类型子元素的最后一个元素

:nth-child()

根据元素在标记中的次序选择相应的元素

【所有的nth伪类都接受一个参数,这个参数是一个公式,公式可以是一个整数,或者关键字odd、even或者形如an+/-b的结构】

:nth-last-child

根据元素在标记中的反序选择相应的元素

:nth-of-type

与:nth-child类似,主要区别是它更具体了,只针对特定类型的元素

:nth-last-of-type

:only-child

选择父元素中唯一的子元素

:only-of-type

选择同级中类型唯一的元素,与:only-child类似,但针对特定类型的元素,让选择符有了更强的意义

:target

通过元素的ID及URL中的锚名称选择元素

3. 表单相关

:checked

选择被勾选或选中的单选按钮、多选按钮及列表选项

:default

从表单中一组类似元素里选择默认的元素

:disabled

选择禁用状态的表单元素。处于禁用状态的元素,不能被选中、勾选,不能获得焦点

:empty

选择其中不包含任何内容的空元素

:enabled

选择启用的元素

:in-range

选择有范围且值在指定范围内的元素

:out-of-range

选择有范围且值超出指定范围的元素

:indeterminate

选择单选按钮或复选框在页面加载时没有被勾选的

:valid

选择输入格式符合要求的表单元素

:invalid

选择输入格式不符合要求的表单元素

:optional

选择表单中非必填的输入字段。换句话说,只要输入字段中没有required属性,就会被:optional伪类选中

:required

选择有required属性的表单元素

:read-only

选择用户不能编辑的元素

:read-write

选择用户可以编辑的元素,适用于有contenteditable属性的HTML元素

:scope

适用于style标签中有scoped属性的情形,如果页面中某一部分的style标签里没有scoped属性,那么:scope伪类会一直向上查找,直到html元素,即当前样式表的默认作用范围。(试验阶段)

4. 语言相关

:dir

选择文档中指定了语言方向的元素。换句话说,为了使用:dir伪类,需要在标记中为相关元素指定dir属性。语言方向目前有两种:ltr(从左到右)和rtl(从右往左)。目前只有火狐支持该类,在使用时需加前缀( -moz-dir() )

:lang

选择的元素通过lang=""属性、相应的meta元素以及HTTP首部的协议信息来确定

5. 其他

:root

选择文档中最高层次的父元素

:fullscreen

选择在全屏模式下显示的元素,不适用于用户按F11进入的全屏模式,只适用于通过JavaScript Fullscreen API切换进入的全屏模式,通常由父容器中的图片、视频或游戏来调用(试验阶段)


简述伪元素选择器的一些用法(其中分为2类)

1. 单双冒号都可生效

::before

在被选元素前插入内容

::after

在被选元素后插入内容

【对于伪元素::before和::after而言,属性content是必须设置的,通过这个伪元素生成的内容不能通过其他选择符选中】

::first-letter

匹配元素中文本的首字母。被修饰的首字母不在文档树中

【::first-letter只在display属性为block, inline-block, table-cell, list-item 或者 table-caption的元素上才起作用】

::first-line

匹配元素中第一行的文本。这个伪元素只能用在块元素中,不能用在内联元素中。

5. 仅能使用双冒号才生效

::selection

匹配被用户选中或者处于高亮状态的部分。在火狐浏览器使用时需要添加-moz前缀。

::placeholder

选择表单元素中通过placeholder属性设置的占位文本

::backdrop

在全屏元素后面生成的一个盒子,与:fullscreen伪类连用,修改全屏后元素的背景颜色(试验阶段)


其中有一部分的伪类和伪元素选择器处于试验阶段,可以在Can I Use或其他网站检查一下其兼容性。

好了,今天就是文汇软件小编为大家分享的文章,如果喜欢小编的话就来文汇软件来看小编更多的文章吧。



返回列表

相关文章

相关案例