但是,网页中一些特殊的样式,需要用到特殊的CSS选择器来设置。在CSS中,我们把这类选择器称为伪选择器。
伪选择器,分为伪类选择器和伪元素选择器两个大类。
伪类选择器,简称伪类;伪元素选择器,简称伪元素。
在网页中,有些元素的状态是动态变化的,该元素会根据其状态呈现不同的样式。比如,未访问的链接为:带有下划线的蓝色文本,访问过的链接为:带有下划线的紫色文本。
1.要达到这种效果,就需要使用状态伪类。
在网页中,链接通常会有四种不同的状态,分别是未访问状态、已访问状态、鼠标悬停状态、链接点击状态。
这时候,就需要:link、:visited、:hover
和 :active
四种状态伪类,依次为链接的四种状态,来设置不同的样式。
(1):link
伪类,可以设置「未访问状态」的样式。:
浏览器中,未访问的链接默认为蓝色。
(2)visited
伪类,可以设置「已访问状态」的样式。
(3):hover
伪类,可以设置「鼠标悬停状态」的样式。
将鼠标经过或悬停在链接上,观察颜色变化。
(4)active
伪类,可以设置「点击时状态」的样式。单击链接不松开,观察颜色变化。
(5)focus
伪类:它表示在元素获得焦点时,向元素添加特殊的样式。
在网页中,有时我们需要对特定位置的元素设置一些样式。比如,有若干个p元素,都没有class属性,那么我们如何给某个或某些p元素设置样式呢?
2.这时候,我们就可以使用结构伪类来进行设置。
(1):first-child伪类:first-child
伪类,用于匹配第一个子元素。
(2):last-child伪类:last-child
伪类,用于匹配最后一个子元素。
(3):nth-child(n)
伪类,就十分灵活了,它可以用于匹配第n个子元素。
也就是说,:nth-child(n)
伪类可以匹配任意一个子元素,十分方便。
不仅如此,它还能一次性匹配多个子元素。
因为,它的小括号()
中的n
,不一定是具体的数字,也可以是一个an+b
形式的参数。
使用p:nth-child(2n)
,匹配父元素body的偶数位置的子元素p,
使用p:nth-child(2n+1)
,匹配父元素body的奇数位置的子元素p,