CSS(三)

坑军之王的头像
坑军之王
174

伪类选择器是指在某个元素的某个状态下的样式,它是通过触发一定的“事件”来实现效果,即如果不进行任何操作是看不到该选择器的CSS样式设置的。

其中伪类选择器和伪元素选择器在书写上,伪类选择器只有一个冒号,即:(p:hover),而伪元素选择器是有两个冒号的(p::before),这主要是伪类选择器和伪元素选择器之间的区分。

伪类选择器分为静态伪类选择器、动态伪类选择器和结构伪类选择器,如下对选择器进行说明:

静态伪类选择器

静态伪类选择器只用于超链接。方法如下:

选择器

说明

:link

超链接在访问前

:visited

超链接访问后

:hover

鼠标悬停在元素上的时候

:active

鼠标点击元素且不松手

 

在超链接中使用伪类选择器时,有一个固定的顺序(表中从上往下),如果顺序错误将不会生效。

动态伪类选择器:

顾名思义,它们根据条件的改变匹配元素,该选择器对元素都能达到应用效果。

选择器

说明

:hover

鼠标悬停在元素上的时候

:active

鼠标点击元素且不松手

:focus

标签获得焦点的时候

 

在这里会发现:hover和:active两个伪类选择器和上面相同,那是因为现如今对这两种(静态伪类、动态伪类)选择器的划分已经近乎模糊,在使用的时候能够使用出来即可。

结构伪类选择器

顾名思义,结构伪类选择器是对元素的结构进行选择确定后进行更改。

选择器

说明

E:first-child

匹配E元素的父元素下第一个子元素

E:last-child

匹配E元素的父元素下最后一个子元素

E:nth-child()

选择括号内填入数字的序号的子元素

在伪选择器进行选择元素的时候,顺序是不会因元素的标签而变化的,例如:

一个元素中有一堆子元素,且第一个元素和后面的元素不一样。在使用伪类选择器进行顺序选择的时候,第一个元素也会被计算进元素的计算中。

用户评论
评论列表