您的位置:

CSS伪类选择器对标签的修饰

一、:hover

当鼠标悬停在标题上时,可以使用:hover伪类选择器对

标签进行修饰。比如改变标题文字颜色、加粗显示等,可以增强页面交互性。

代码示例:

h1:hover {
    color: red;
    font-weight: bold;
}

二、:active

当标题被激活(鼠标点击)时,可以使用:active伪类选择器对

标签进行修饰。比如改变标题文字颜色、字体样式等,可以提高页面观感。

代码示例:

h1:active {
    color: blue;
    font-family: Arial;
}

三、:first-child

选择第一个

标签可以使用:first-child伪类选择器对

标签进行修饰。比如改变第一个标题的文字颜色、字体大小等,可以提高页面排版效果。

代码示例:

h1:first-child {
    color: green;
    font-size: 24px;
}

四、:last-child

选择最后一个

标签可以使用:last-child伪类选择器对

标签进行修饰。比如改变最后一个标题的文字背景色、字体粗细等,可以提高页面美观度。

代码示例:

h1:last-child {
    background-color: yellow;
    font-weight: bold;
}

五、:nth-child(n)

选择第n个

标签可以使用:nth-child(n)伪类选择器对

标签进行修饰。比如改变第3个标题的文字颜色、字体大小等,可以实现页面样式的层次感。

代码示例:

h1:nth-child(3) {
    color: orange;
    font-size: 16px;
}

六、:visited

选择已访问过的

标签可以使用:visited伪类选择器对

标签进行修饰。比如改变已访问标题的文字颜色、字体样式等,可以提高用户体验度。

代码示例:

h1:visited {
    color: purple;
    font-style: italic;
}