伪类,用来专门表示元素的一种特殊的状态。比如:访问过的超链接,普通的超链接,获取焦点的文本框。当我们需要为处在这些特殊状态的元素设置样式时,就可以使用伪类。
常用的伪类有以下几个:
a:link {color: #FF0000} /* 设置未访问的链接样式 */
a:visited {color: #00FF00} /* 设置已访问的链接样式 */
a:hover {color: #FF00FF} /* 设置鼠标移动到链接上样式 */
a:active {color: #0000FF} /* 设置选定的链接样式 */
用法举例:
a:link{ /*为没有访问过的链接设置一个颜色*/
color: aqua;
font-size: 20px;
}
a:visited{ /*为访问过的链接设置一个颜色*/
color: #FF7F50;
font-size: 10px; /*设置了字体但是不会生效,访问过的只能定义修改字体颜色 */
}
a:hover{ /*设置鼠标滑过的样式*/
font-size: 30px;
color: blue;
}
a:active{ /*设置点击时的样式*/
color: black;
background-color: #0000FF;
font-size: 5px;
}
其他的一些不常用的:
-:focus 获取焦点
-:befor 指定元素前,
-:after 指定元素后
-::selection 选中的元素
before表示元素最前边的部分,after表示元素最后的部分,一般都需要结合content这个颜色一起使用,通过content可以向before或者after的位置添加一些内容
用法举例:
#ptest:before{
content: "出现在段落最前边的";
color: blue;
}
#ptest:after{
content: "出现在段落最后边的";
color: chartreuse;
}
#input:focus{ /*设置获取焦点的样式*/
background-color: #0000FF;
color: #FF7F50;
}
p span::selection{ /*设置选中的样式*/
background-color: aqua;
font-size: 1.875rem; /*不能改变字体颜色,此样式设置在这里无效*/
color: #0000FF;
}
给段落定义样式的:
-:first-letter 设置首字母
-:first-line 设置首行
用法举例:
#ptest:first-letter{ /*设置第一个字的样式*/
font-size: 20px;
color: #FF7F50;
}
#ptest::first-line{ /*设置第一行的样式*/
font-size: 15px;
color: aqua;
}