css伪类选择器

超链接伪类选择器

在支持 CSS 的浏览器中，链接的不同状态都可以不同的方式显示，这些状态包括：活动状态，已被访问状态，未被访问状态，和鼠标悬停状态

选择器

• a:visited ：已被访问状态
• a:link ：未访问状态
• a:hover ：鼠标悬停状态
• :active ：用户激活

语法：

a:visited{color: red;}
a:link{color: blue;}
a:hover{color: green;}
a:active{color: yellow;}

表单:focus

:focus表单获得焦点时触发样式

input:focus{color: red;}

first-child

:first-child 伪类来选择元素的第一个子元素

p:first-child{color: red;}

:last-child

:last-child 伪类来选择元素的最后一个子元素

p:last-child{color: red;}

:nth-child()

nth-child(number)

表示第几个元素

/* 选择第二个元素 */
p:nth-child(2){color: red;}

nth-child(odd)和nth-child(even)

nth-child(odd)表示取出奇数的子元素，即取出第1，3，5，...个子元素

nth-child(even)表示取出偶数的子元素，即取出第2，4，6，...个子元素

/* 选择奇数的子元素 */
p:nth-child(odd){color: red;}
p:nth-child(2n-1){color: red;}
/* 选择偶数子元素 */
p:nth-child(even){color: red;}
p:nth-child(2n){color: red;}

nth-child(±an+b)

表示从b点，向左或者向右按步长a(a>0)取出子元素

/* 选取每个第三段，从第二个子元素开始 */
p:nth-child(3n+2){color: red;}

所有伪类选择器