在CSS中,有许多种选择器可以选择不同的元素进行样式控制,伪类选择器是其中一种比较常见的选择器。伪类选择器用于选择元素的一种状态或特定的部分,例如链接的状态、表单控件的状态等。本篇文章将介绍CSS中的四种常用的伪类选择器。
a:link{ color:blue; } a:visited{ color:purple; }
:link和:visited伪类选择器用于选择链接的不同状态。:link选择所有未被点击的链接,而:visited选择所有已经被点击过的链接。我们可以通过设置不同的样式来让这些链接的状态更加明显。例如,设置:link链接的文字颜色为蓝色,而设置:visited链接的文字颜色为紫色。
input:focus{ background-color: #F5F5F5; }
:focus伪类选择器用于选择被选中或聚焦的表单元素。当用户在表单元素上面点击或输入时,该元素就获得焦点,我们可以通过使用:focus选择器来设置该元素的样式。例如,设置表单元素获得焦点时的背景色为浅灰色。
li:nth-child(odd){ background-color: #F0F0F0; } li:nth-child(even){ background-color: #FFFFFF; }
:nth-child伪类选择器用于选择某个父元素下的某个特定位置的子元素。其中:nth-child(odd)表示选择所有位置为奇数的子元素,而其余的子元素则被选择为:nth-child(even)。我们可以通过设置不同的样式来为这些交替出现的子元素设置不同的背景色或字体颜色等属性。
:not(p){ background-color: #D8D8D8; }
:not伪类选择器用于选择不匹配某种条件的元素。在:not后面添加一个CSS选择器,可以排除这些元素,并对剩余的元素进行样式设置。例如,对于所有不是p标签的元素,我们可以通过设置:not(p)来为这些元素设置统一的背景色。