5 伪类选择器
anchor伪类：专用于控制链接的显示效果
| More Actions:link | a:link | 选择所有未被访问的链接。 |
|---|---|---|
| :visited | a:visited | 选择所有已被访问的链接。 |
| :active | a:active | 选择活动链接。 |
| :hover | a:hover | 选择鼠标指针位于其上的链接。 |
<style>
a:link{
color: red;
}
a:visited{
color: coral;
}
a:hover{
color: blue;
}
a:active{
color: rebeccapurple;
}
</style>
before after伪类
before/after伪类相当于在元素内部插入两个额外的标签，其最适合也是最推荐的应用就是图形生成。在一些精致的UI实现上，可以简化HTML代码，提高可读性和可维护性。
| More Actions:first-child | p:first-child | 选择属于父元素的第一个子元素的每个 元素。 |
|---|---|---|
| :last-child | p:last-child | 选择属于其父元素最后一个子元素每个 元素。 |
| :before | p:before | 在每个 元素的内容之前插入内容。 |
| :after | p:after | 在每个 元素的内容之后插入内容。 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css伪类选择器</title>
<style>
/*a:link{*/
/* color: red; !* 鼠标点击字体变成红色 *!*/
/*}*/
/*a:visited{*/
/* color: coral; !* 设定字体为橙色 *!*/
/*}*/
/*a:hover{*/
/* color: blue; !* 鼠标滑过字体变成蓝色 *!*/
/*}*/
/*a:active{*/
/* color: rebeccapurple;*/
/*}*/
.c1 p:first-child{
color: red;
}
p#i1:after{
content: "这是一个伪类构造的块级标签";
display: block;
color: gold;
}
</style>
</head>
<body>
<a href="https://www.baidu.com">hello world! </a>
<div class="c1">
<p>item1</p>
<p>item2</p>
<div>item3</div>
<p>item4</p>
</div>
<div id="i1">
DIV标签
<!-- <div style="color: red">这是一个伪类构造的块级标签</div>-->
</div>
<p>两只黄鹂鸣翠柳</p>
</body>
</html>