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() |
选择括号内填入数字的序号的子元素 |
在伪选择器进行选择元素的时候,顺序是不会因元素的标签而变化的,例如:
一个元素中有一堆子元素,且第一个元素和后面的元素不一样。在使用伪类选择器进行顺序选择的时候,第一个元素也会被计算进元素的计算中。